Colors as Hue, Saturation, and Lightness
Antenna House Formatter can use HSL colors by the hsl() and hsla() functions. Colors that are specified as hue, saturation, and lightness (HSL) values are more intuitive to use or to adjust than colors that are encoded by their red, green, and blue components. It is also easier to make sets of complementary or matching HSL colors by varying one of the hue, saturation, or lightness values to make the different colors. Use hsl(<H>, <S>, <L>) to specify a color, and use hsla(<H>, <S>, <L>, <A>) to specify a color with an additional alpha component representing its opacity. See also hsl() and hsla() in the Online Manual for details.
Hue is represented as the number of an angle of the color circle (i.e., the rainbow represented in a circle), where red is 0° (and 360°), green is 120°, and blue is 240°. Saturation, lightness, and opacity are represented either as 0% to 100% or 0.0 to 1.0. 100% saturation is full saturation, and 0% saturation is a shade of gray. 100% lightness is white, 50% lightness is “normal”, and 0% lightness is black. 100% opacity is solid color, and 0% opacity is transparent.
The following example for the “cornflowerblue” named color (#6495ED, equivalent to hsl(219, 79%, 66%)) shows how colors can be adjusted by altering the hue, saturation and lightness values.
cornflowerblue (#6495ED)
20% more saturated
Saturation
20% less saturated
20% lighter
hsl(219, 99%, 86%)
hsl(219, 79%, 86%)
hsl(219, 59%, 86%)
Lightness
hsl(219, 99%, 66%)
hsl(219, 79%, 66%)
hsl(219, 59%, 66%)
20% darker
hsl(219, 99%, 46%)
hsl(219, 79%, 46%)
hsl(219, 59%, 46%)
219
249
279
309
339
9
39
69
99
129
159
189
This example is for the “red” named color (#FF0000, equivalent to hsl(0, 100%, 50%)). Note that as “red” is 100% saturated, it cannot be made more saturated, so 120% saturation is clipped to 100%.
red (#FF0000)
20% more saturated
Saturation
20% less saturated
20% lighter
hsl(0, 120%, 70%)
hsl(0, 100%, 70%)
hsl(0, 80%, 70%)
Lightness
hsl(0, 120%, 50%)
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
20% darker
hsl(0, 120%, 30%)
hsl(0, 100%, 30%)
hsl(0, 80%, 30%)
219
249
279
309
339
9
39
69
99
129
159
189
There are numerous “color picker” Internet sites that support picking a color or a range of related colors by HSL values. For example, http://www.workwithcolor.com/hsl-color-picker-01.htm and http://www.workwithcolor.com/mm-color-blender-01.htm.