Forum Moderators: open
But, when I started using CSS about four months ago, and needed to use hex colors, I found myself getting back into FrontPage for the sole purpose of using the hex color chooser.
However, that's very cumbersome, and I'd rather be able to simply say, "Oh, I'd like a light blue, I'll try cceeff." So my question is, how do you just find the hex color you want, without needing to use some visual aid?
The 216 pallet is no longer valid. There were 256 possible colors on the 8 bit system. There used to be a disparity in the actual color values between Macs and PCs. Forty of the possible colors wouldn't match on each machines pallet. The result was that the non web safe color would dither on the incompatible machine and look horrid. However, modern Macs and PC don't use 8 bit color. Win 95 machines still default to 8 bit, but all 95 machines will have graphics cards that can handle 16 bit or more so the user just need to up the display setting. As for the Macs, well if any are still running then they are probably museum pieces by now. (and the color mac was never as popular as the older B&W model anyway). But within a short time of the 216 pallet getting published, IE developed a bug that causes several colors to display incorrectly. So the 216 pallet isn't web safe anyway.
Using modern browsers, monitors, graphics cards and operating systems, we have altered the available pallet of colors. The pallet now contains millions of colors. But each PC comes with a different brand of graphics card. There are many different operating systems and browsers to choose form. Has anyone done any real testing to see what colors really are web safe on modern systems? Would be practical or useful to do such a test?
Moving on, as for selecting background and foreground colors that match. (I'll use multiples of 33 here just for simplicity) Simply taking the arithmetic opposite (e.g #333333 is opposite #cccccc) is not a perfect solution. It doesn't take in to account the contrast. The arithmetic opposite of #666666 is #999999 which would not make a good selection for fore and background colors.
There are basically 3 methods for selecting colors that mach well and are easy to read. To do this you must consider 3 key values, Hue and tone and saturation. Hues value of the prominent color. For example #FF0000 is red and #00FF00 is green.
The tone or shade of the hue is the amount of For example #FF0000 (red) and #660000 (dark red) and #FFCCCC (light red) are all different tones of the Red hue. The overall tone of a color is found by averaging the values the rgb colors. For example, #ff0000 has a tone of [(FF+00+00)/3]aprox. #AA. Where as #FFCCCC has a tone of [(FF+CC+CC)/3] aprox. #DE. Clearly #DE is higher than #AA so the #FFCCCC is lighter in tone than #FF0000.
Saturation is the value difference between the hue and the other color values. For example, #CC6666 is a more saturated shade of red than #996666 and #666666 has a saturation of 0.
Now to select a color mach you have to consider what the function of the color is to be.
For text on a background, it is important to have disparate tones. We'll deal with the hue latter. If the text has a color of #000033 (dark blue) then it has a tone of #11. The best tone for the background should be a decent distance away for #11. I have found that at least #66 difference, preferable more, is required for readable text. To test, try using the de saturated value of the color. So #000033 becomes #111111. Then try adding, say, 99. So we get #AAAAAA. Try some text in #111111 and on a background of #AAAAAA. If you can read the text then you can use those tones. If the text is not readable, try a greater contrast in the tone. Lets say we are happy with #AAAAAA for tone. Thats an average tone of #AA for example #9999CC, #99CC99 or #CC9999 or even #BBBB99.
For choosing colors for areas of a page, balance is more important than contrasting tones. For example, in a 3 column layout, if you have a dark tone on the left and a light tone on the right, then the page may feel off balanced. If you want each column to have equal weight then you give each column a color with equal tones. If you want an area to stand out, give it a contrasting tone.
Now that you have a tone to work with, you have to select a hue. In the previous example, we used #000033 (dark blue) with a tone of #11 and we want another color that also has a tone of #11.
The simplest way to ensure a match is to stick to a monochromatic pallet and keep the hue to blue. So if the text is dark blue, the background should be a light blue. So we could use #000033 for text and #9999CC for the background.
Another way, opposites attract. Think of the color wheel, Yellow, Green, cyan, Blue, Magenta, Red, Orange. Colors on opposite sides of the wheel match. So Blue goes well with orange. So for dark blue text (#000033) we could use light orange background (#BBBB99). To get the value of orange, we just keep the R G value equal, higher than the B value but also sticking to the tone of #11. Other oranges that could work would be #CCCC33 (more saturated but the same color and hue) or maybe #B8B893 (less saturated).
A third way is to use thirds. Look at a color wheel again. Colors that are one third of the way round the wheel work well together. So Red Green and blue will work together as a text, background, border combination. But never use colors that are right next to each other. So Blue with magenta and cyan are a no no combo. So keeping to dark blue as the text (#000033) we can use light green (#99CC99) for the background and light red (#CC9999) for the border. But keep clear of colours that are next to each other on the wheel. So #99BBBB and #BB99BB are definitely out.
For more complex colours, the third match can be found just by rotating round the numbers. For example #2134F8 will match with #34F821 and #F82134 using the thirds system.
In your design, use one of the 3 systems above. Don't try to mix the opposites with the thirds as you will end up with color clashes. Pick a system and stick to it. You can vary the tones and saturation of the colors as much as you like. But you should try to stick to just 1, 2 or 3 colours plus black, white and grey.
--
Greetings,
Herenvardö
