Color guide
CSS color formats guide
Modern CSS supports familiar sRGB syntax and newer perceptual color functions. The right format depends on browser support, editing needs, and the design-system job.
Use HEX and RGB for broad familiarity
HEX and RGB remain useful for simple colors, brand values, design handoff, and compatibility with many tools.
Use HSL for quick manual adjustments
HSL is readable and easy to adjust, especially for hue rotations and simple lightness changes.
Use OKLCH when perceptual control matters
OKLCH is useful for modern UI color scales because lightness, chroma, and hue are easier to reason about perceptually than raw RGB channels.
White points matter
CSS Lab and LCH are based on D50-adapted CIE Lab, while sRGB and OKLab/OKLCH calculations use D65. Hue Codex converts through the correct white point instead of treating every color space as interchangeable.
Try it in Hue Codex
Use the free tools to test the idea immediately: pick a color, convert it, generate harmonies, build tints and shades, check contrast, and export practical CSS or palette data.
Quick answers
CSS color formats guide FAQ
Should I use OKLCH in production CSS?
Use it when your browser support requirements allow it, and keep fallbacks when your audience needs older support.
Are CSS variables a color format?
No. CSS variables store values. They can hold HEX, RGB, HSL, OKLCH, gradients, or any other valid CSS value.