The four common CSS colour syntaxes can describe the same rendered colour. Choose the one that makes the next change safe: hex for a stable literal, rgb() for channels and alpha, HSL for quick hue experiments, and OKLCH for systematic lightness ramps.
What each format is good at
| Format | Example | Best use |
|---|---|---|
| Hex | #2563eb | Compact, familiar fixed token |
| RGB | rgb(37 99 235 / 80%) | Alpha or channel-level composition |
| HSL | hsl(221 83% 53%) | Quick hue/saturation exploration |
| OKLCH | oklch(0.62 0.19 255) | Consistent scales across hues |
Build tokens, not isolated swatches
:root {
--blue-700: oklch(0.48 0.17 255);
--blue-500: oklch(0.62 0.19 255);
--blue-200: oklch(0.84 0.07 255);
}The first OKLCH value is perceptual lightness. Holding hue roughly steady while changing lightness produces a scale that is usually more believable than equal HSL percentages, especially when a yellow and blue need comparable visual weight.
Equal numeric lightness is not an accessibility result. Contrast depends on the actual foreground/background pair, font weight, and the browser's rendered gamut.
Check the edge cases
Some high-chroma OKLCH colours lie outside sRGB; browsers map them into their available gamut. Inspect critical brand colours on the displays you support, then test real text states—normal, hover, disabled, and selected—not a palette tile on white.
A colour converter is useful for translating a token, but the design decision belongs in named variables. That keeps CSS from becoming a mixture of unrelated # literals that nobody can tune together.