Hue identifies a color’s position around a color circle. In CSS HSL, it is the first value: hsl(198deg 73% 46%) has a cyan-blue hue. Red is at 0deg, yellow at 60deg, green at 120deg, cyan at 180deg, blue at 240deg, and magenta at 300deg. The circle returns to red at 360deg, so angles outside one turn can be reduced by adding or subtracting 360deg. The angle can also be written without deg. section 11.2.2
Hue alone does not determine the resulting color. In HSL, saturation controls intensity: at 0%, the result is gray regardless of hue. Lightness controls how light or dark it is, reaching black at 0% and white at 100%. Separating these values makes a color such as hsl(198deg 73% 46%) easier to reason about than its equivalent hex value, #2097c9. section 11.2.2
Keep a palette in the same color family
In OKLCH, three related greens can use hue angles near 165deg while varying their other values. To try a lighter green, start with oklch(85% 0.12 165deg), then adjust lightness and chroma in browser DevTools. If several definitions share a hue, store the angle in a custom property and use it in values such as oklch(45% 0.09 var(--brand-hue)). section 11.3.1
Listing 11.6 Converting hex colors to OKLCH
@layer theme {
:root {
--brand-green: oklch(45% 0.09 165.4deg); #1
--dark-green: oklch(59% 0.12 164.1deg); #1
--medium-green: oklch(74% 0.15 166.4deg); #1
--text-color: oklch(26% 0.01 0deg); #2
--gray: oklch(64% 0.02 248deg); #2
--light-gray: oklch(96% 0.003 248deg); #2
--extra-light-gray: oklch(98% 0 0deg);
--white: oklch(100% 0 0deg);
}
}
The palette listing puts related green hue angles side by side, making their shared color family easier to spot than in hex notation. section 11.3.1
Use a shared hue when developing related colors, but check the result visually. Before relying on OKLCH in a project, check browser support for the target audience and provide older-format fallback values where needed. section 11.3.1
