HEX, RGB, HSL: the complete guide to CSS color formats Written on . Posted in Tutorials.
The four CSS color formats every developer should know
HEX (#rrggbb)
The most common format. Each pair of hex digits represents red, green, and blue on a 0–255 scale. #ff0000 is pure red. The 3-digit shorthand #f00 expands to #ff0000. Use HEX when copying from design tools like Figma or Sketch — they always output HEX.
RGB / RGBA
rgb(255, 0, 0) is the same as #ff0000. The advantage of RGB is transparency: rgba(255, 0, 0, 0.5) gives you a 50% transparent red. Use RGBA for overlays, shadows, and any element that needs opacity.
HSL / HSLA
Hue (0–360°), Saturation (0–100%), Lightness (0–100%). The killer feature: generating color variations programmatically. Want a lighter shade of your brand color? Just increase the L value. This is why design systems like Tailwind and Material use HSL internally.
/* Create a 5-shade palette from one hue */
--color-100: hsl(220, 90%, 95%);
--color-300: hsl(220, 80%, 75%);
--color-500: hsl(220, 70%, 55%); /* base */
--color-700: hsl(220, 65%, 35%);
--color-900: hsl(220, 60%, 15%);
OKLCH — the modern standard (CSS Color Level 4)
OKLCH is perceptually uniform — equal lightness steps look equally different to the human eye, unlike HSL. Browser support is now excellent (Chrome 111+, Firefox 113+, Safari 15.4+). Use it for new design systems.
Quick conversion rules
- From Figma/Sketch → use HEX, convert to HSL for theming
- For shadows and overlays → use RGBA
- For programmatic color scales → use HSL or OKLCH
- For modern design systems → use OKLCH
Convert any color format instantly
Paste any HEX, RGB, or HSL value and get all formats instantly — no signup required.