CSS Color Formats Explained: HEX, RGB, HSL, RGBA and When to Use Each
Last updated: June 2026
Why There Are Multiple CSS Color Formats
CSS supports multiple color formats because different formats serve different purposes. Some are better for human readability, some for programmatic manipulation, some for transparency control, and some for perceptual accuracy. Understanding each format means you can choose the right one for each context rather than defaulting to whichever one you learned first.
In 2026, the most commonly used CSS color formats are HEX, RGB, RGBA, HSL, HSLA, and the newer oklch. Each is fully supported in modern browsers. You can convert any color between formats instantly using our free HEX to RGB converter.
HEX (#RRGGBB)
background-color: #F8FAFC;
border-color: #E4E4E7;
Six-character hexadecimal code representing red, green, and blue channels. Compact, unambiguous, easy to copy between tools. Supports 3-character shorthand when each pair repeats (#FFF = #FFFFFF). 8-digit HEX adds alpha channel (#RRGGBBAA).
HEX is the standard format for sharing colors between design tools and codebases. Figma exports in HEX by default. CSS design tokens are almost always stored as HEX. When you copy a color from DevTools or a color picker, you get HEX. It is the lingua franca of web color.
RGB (rgb(R, G, B))
background: rgb(248, 250, 252);
Red, green, blue channels each from 0 to 255. More readable than HEX for developers who think numerically. Easier to understand relationships: rgb(255,0,0) is obviously pure red. Modern CSS also allows rgb(124 58 237) with spaces instead of commas.
RGB is useful when you are manipulating color values in JavaScript or CSS calculations. It maps directly to the underlying screen color model. If you are computing a color by interpolating between two values, working with RGB channel numbers is straightforward. For static colors in stylesheets, HEX is usually preferred for brevity.
RGBA (rgba(R, G, B, A))
box-shadow: 0 4px 16px rgba(124, 58, 237, 0.2);
background: rgba(255, 255, 255, 0.9); /* frosted glass */
RGBA adds an alpha (opacity) channel from 0 (fully transparent) to 1 (fully opaque). Used for every transparency effect in CSS: modal overlays, frosted glass backgrounds, colored shadows, and hover state variations of brand colors.
HSL (hsl(H, S%, L%))
/* Easy to create a lighter version: */
background: hsl(262, 83%, 85%);
/* CSS custom properties with HSL: */
:root {
--color-primary-hue: 262;
--color-primary: hsl(var(--color-primary-hue), 83%, 58%);
--color-primary-light: hsl(var(--color-primary-hue), 83%, 85%);
}
Hue (0-360 degrees on the color wheel), Saturation (0-100%), Lightness (0-100%). The most human-readable format because the values have intuitive meaning: changing only lightness adjusts brightness without shifting the hue. This makes it ideal for building color scales.
HSL is the recommended format for CSS custom properties in design systems. By separating the hue, saturation, and lightness values into individual variables, you can build dynamic theming systems where changing one hue variable updates the entire color scale consistently. It is also the easiest format to work with when creating hover states, disabled states, and focus rings.
HSLA
HSLA adds the alpha channel to HSL: hsla(262, 83%, 58%, 0.5). It combines the readability of HSL with the transparency control of RGBA. For new code using HSL variables, HSLA is the preferred way to add transparency rather than converting back to RGBA.
oklch: The Modern Standard for Design Systems
/* L = lightness 0-1, C = chroma, H = hue 0-360 */
oklch uses the Oklab perceptual color space. It produces more visually uniform color scales than HSL -- equal lightness steps look equally different to the human eye. Supported in all modern browsers since 2023. The right choice for new design systems where perceptual accuracy matters.
When to Use Each Format
- HEX: Copying colors between tools, design tokens, sharing with teammates, legacy code
- RGB: When you need the numeric channel values for JavaScript calculations
- RGBA: Any transparency effect: overlays, shadows, hover states
- HSL: CSS custom properties, design systems, color scales, dark mode theming
- HSLA: Transparent versions of HSL variables in modern codebases
- oklch: New design systems in 2026+ that need perceptually uniform color steps
CSS Custom Properties With Color Formats
The most powerful use of CSS color formats is in custom properties. Store base hue values as individual numbers so you can build dynamic scales:
--hue-primary: 262;
--color-primary: hsl(var(--hue-primary), 83%, 58%);
--color-primary-light: hsl(var(--hue-primary), 83%, 85%);
--color-primary-dark: hsl(var(--hue-primary), 83%, 35%);
--color-primary-10: hsla(var(--hue-primary), 83%, 58%, 0.1);
}
Change --hue-primary once and every derived color updates automatically. This pattern makes theming, white-labeling, and accessibility overrides dramatically simpler than maintaining separate HEX values for every variant.