Website Color – Contrast, Primary, Random

Contrast

If the background of an element is dark, you want a light (typically white) text. If it’s light, you want a dark (typically black) text. But what’s dark and what’s light? Technically speaking, light colors are those whose red, green, and blue components are greater then hex 7f (decimal 127). However, our eyes are tricky creatures, and that doesn’t always work. Instead, you need to know the lightness component. You can convert the color to hsl (hue, saturation, light), but that’s rather involved. There’s also a one line if statement I found somewhere on the web which will do the trick instead.

if(((red_component*299)+(green_component*587)+(blue_component*114))/1000>128){contrast=’black’}else{contrast=’white’}

Of course, first you have to get or know the background color of the element. Then you have to convert it from whatever color system it was specified in to rgb. The color system could have been hex, rgb, or an official color name. It could have been a few other color systems. If it is, you’ll need to deal with that. Otherwise, see my functions below to help with this.

Primary Colors

What are the primary colors? Google this and you’ll typically get primary, secondary, and tertiary color names. Some people think of primary colors as the colors of a rainbow. Others think of it as the colors in an 8-crayon box.

My list of primary colors start with those where the hex red, green, and blue values are 00 or FF. This gives us Black, Red, Yellow, Green, Aqua/Cyan, Blue, Magenta/Fuschia, and White. Then I add in those colors where one or more of the values are 7F, for a total of 15 colors.

Random Colors

A Random Color is easy enough to calculate. Some people take a random value for Red (between 0 and 255), one for green, and one for blue. I just take a random number somewhere between the 0 and the maximum number of possible colors.

In Javascript, this is ‘#’+Math.floor(Math.random()*16777215).toString(16).padStart(6,’0’); I may have missed one color at the top-most value, don’t know, don’t really care. toString converts to hex, padStart adds leading zeros, if any are missing.

The real trick, is how to you generate an array of random colors, without any duplicates? What does duplicate mean? I can’t tell the difference between my wife’s navy blue socks and her black ones. I mean they should be labeled. She can. So, duplicate is a matter of how close to another color is too close? I suppose hsl would work better for this. However, I just define it as the red, green, and blue each being within 16 of the red, green, blue of another color. If that doesn’t work for you, you can call my routine passing a different value for tooclose. You’ll probably want to pass a value > 16, like 32.

I also allow you to not accept grey, black, or white values in your array. The array can contain 1000 values. However, if you disallow grey, black, or white, it may contain slightly less than 1000 values. It may also contain slightly less than 1000 values due to dups. I figured 900+ values should be sufficient for most applications.

x_press javascript functions

If you need to add some basic javascript functions to your website to deal with colors, check out my free javascript library. It’s designed to make your website more expressive. And it’s easy to use, even if you don’t know much about javascript.

 

x=x_color(elementID,foreback) will return the foreground or background color of the element. Foreback can be ‘text’,’foreground’, ‘fore’, ‘fg’ for foreground. Foreback can be ‘background’,’back’, ‘bg’ for background. Any other value will return the background color.
x=x_color_shift(rgb,redshift,greenshift,blueshift) will shift the color. Use positive value for shift for lighter, negative for darker. Specifying 16 or -16 will go slightly lighter or darker.
x_color_primary_array contains primary, secondary, and tertiary colors.x_color_primary_names_array contains the names. x_color_primary_n_array and … names array contain primary colors in sorted order where number of colors is n and n=5,8,15. Brown is actually a red-violet shade, so not included.
x_color_blackx_color_white – black and white, but you can change them to whatever you use for black and white. I was going to set x_color_text and x_color_background to document.body.style.text and document.body.style.backgroundColor, but these would be set in x_press_init. And x_press_init is usually called in <head>. And document.body.style…. is in head. You would need to set your own variables for these in a script after <body>. You might also want to set a variable for document.body.style.borderColor. You can of course you document.body.style…. The only reason for corresponding variables, would be if you can’t recall document.body.style….
x=x_color_convert(fromcolor,tocolor_type) will convert color from one type to another. From type is name, hex, or rgb and is derived from fromcolor. tocolor_type needs to be specified if rgb, otherwise it defaults to hex. tocolor is the returned value.
x=x_color_random_array_init(allowgray,allowblack,allowwhite,tooclose) loads an array of up to 1000 random colors. By default, gray, black, and white are not allowed. The array may contain slightly less than 1000 colors, especially if you disallow gray, black, and white. Also, duplicate colors are not included in the array. Duplicate in this case means that the color is too close to another color in the array. tooclose defaults to 16, meaning the red, green, and blue values are within 16 of each other. You can change tooclose. I suggest increasing it, like to 32. Increasing tooclose raises the chance that the array will contain less than 1000 elements, but you’ll probably still have plenty.
x=x_color_contrast(color) returns a contrasting color. Typically, you have a background color and you want to contrast the (foreground / text) color.
x=x_color_contrast_per_background(x_el,settextcolor=false,setbordercolor=false) returns a contrasting color based on an element’s background. Optionally sets text and/or border colors. This works for elements. It does not work for document.body. To set, document.body.style.color=x_color_contrast(document.body.style.backgroundColor)

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x