Color Harmonies (take 2)
Just finished a new Color Picker based on the FreeDesktop Desktop ColorScheme Specification document.
First I’m using a complimentary color scheme composed of 3 different colors. One for background and two for the foreground.
In this colorscheme several ( 2, 3 or 4 ) colors selected so that thay are on opposing sides of the color wheel - for example blue and yellow, red and cyan. Looks that employ such colorscheme usually convey bold and vibrant impression.
The color wheel normally lets to choose the hue component of a color and sometimes also lets you choose the saturation of that same color. Colors can be seen as composed by three components (hue, saturation and lightness).
Hue: Attribute of visual sensation according to which an area appears to be similar to one of the perceived colours: red, yellow, green and blue, or to a combination of two of them.
Lightness: The brightness of an area judged relative to the brightness of a similarly illuminated area that appears to be white or highly transmitting.
Saturation: Colorfulness of an area judged in proportion to its brightness.
So we will use a color wheel to choose hue (as an angle between 0 and 360 degrees) and saturation (as the distance to the center from 0 to 1).
Having chosen the hue of our first color we now have to choose the hue of the other 2. We will do this by adding and subtracting 120 degrees from it. This way each hue is separated by the same ammount from the next color’s hue.
The FreeDesktop specification also talks about cold and warm colors:
Colors with hues between green and purple ( values of 120 to 300 ) are considered “cold” while the rest of the colors are considered “warm”. One important application of it is that cold colors do not look very good while oversaturated. They tend to look garrish and irritating, so it is generally recommended to desaturate cold colors, to produce more soothing color scheme. At the same time warm colors look their best when oversaturated.
So what we will do is correct the saturation of warm and cold colors so that cold colors have a maximum of 0.4 saturation and warm colors have a minimum of 0.6 saturation.
Next we will choose the lightness of each color. According to the specs:
From the ergonomics perspective it is preferred that foreground interface elements, such as text, should be in stark contrast with background. There are two way to achieve that: hue contrast and brightness contrast (chromatic and achromatic). Human eye has about 5 times higher sesitivity to achromatic differences then to chromatic, therefore achromatic contrast between background and foreground is preferred.
To figure out contrasting color for given background color we should its Lightness value. If Lightness is in upper 50% of the range, then contrasting color will be dark, otherwise - light. Even if Lightness in the middle of the range, it is still preffered to use very dark or very bright contrasting color, instead of using hue contrast.
So what we’ll do is allow the user to choose the lightness used for background and foreground colors.
Now that we have the 3 color components we can try out different combinations and see which one looks better.
