CSS supports more color formats than ever. Choosing the right one makes your stylesheets more readable and your color system easier to maintain.
HEX (#rrggbb)
The classic. Compact and universally supported. Best for exact brand colors and copy-pasting from design tools. Shorthand (#rgb) works when both digits of each channel are identical.
RGB / RGBA
rgb(255, 99, 71) — explicit channel values, easy to read. Add an alpha channel with rgba() for transparency. The modern slash syntax rgb(255 99 71 / 50%) is cleaner.
HSL / HSLA
hsl(9, 100%, 64%) — Hue (0–360°), Saturation, Lightness. Excellent for building color scales: increment lightness to create tints, decrement for shades. Much more intuitive to adjust by hand than HEX or RGB.
OKLCH (modern)
oklch(65% 0.2 30) — a perceptually uniform space. Equal numeric steps look visually equal, unlike HSL. Best for programmatically generated palettes. Supported in all modern browsers.
When to use which
- Design tokens / brand colors → HEX (matches Figma/Sketch output)
- Dynamic transparency → RGBA or HSL with alpha
- Color scales / theming → HSL or OKLCH
- Accessible palette generation → OKLCH
Convert between all formats instantly with ByteForge's Color Converter.