Hue is the part of a color that answers “which color is it?” Think of a color wheel: starting at red, the hue number travels through yellow, green, blue, and violet, then returns to red. Hue is measured in degrees from 0 to 359, with red at 0, green at 120, and blue at 240. section 17.1
In an HSL color value, hue works with two other controls:
- Hue chooses the color family by its position on the wheel. section 17.1
- Saturation chooses purity: 100% is a pure hue, while lower values mix in more gray. section 17.1
- Luminance chooses lightness: 0% produces black, 100% produces white, and 50% is the illustrated midpoint. section 17.1
CSS can specify a color with the hsl() function by supplying hue, saturation, and luminance. Choose a hue number from 0 to 359, then give saturation and luminance as percentages. This is useful when you know the color family you want and want to adjust its intensity or brightness separately. section 17.6 section 17.1
Using the wheel to make a pair
Complementary colors sit opposite one another on the color wheel. In hsl() terms, their hue values are 180 degrees apart: red at hsl(0, 100%, 50%) complements cyan at hsl(180, 100%, 50%). Use one as the main hue and the other as an accent for attention-getting elements such as Subscribe or Buy buttons. section 17.15
A page does not need every hue on the wheel. Limiting a design to two or three colors can avoid confusion and eye fatigue; additional variety can come from different shades of those same hues. Cool hues such as blue and gray can suggest dependability, while warm hues such as red, yellow, and orange can feel festive or fun. section 17.15
