CSS Color Formats Explained: HEX, RGB, HSL, RGBA and When to Use Each
Last updated: June 2026
Quick Answer
CSS color formats are the different ways to define color in code, including HEX, RGB, RGBA, HSL, HSLA, and the modern oklch. HEX and RGB set red, green, and blue values, HSL uses hue, saturation, and lightness, and the alpha versions add transparency. For design systems, oklch offers more consistent, perceptually even colors across your palette.
Advertisement
Why There Are Multiple CSS Color Formats
The main CSS color formats are HEX, RGB, RGBA, HSL, HSLA, and the newer oklch, and each one is best suited to a specific job (MDN Web Docs). 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 (W3C). 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. For more free front-end utilities beyond color, IWantFreeTools.com collects a range of developer tools in one place.
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. Alongside converting between formats, it also helps to give your colors real names, and our color naming guide shows how to pair a HEX or HSL value with a human-friendly name for design tokens and documentation.
Frequently Asked Questions
Which CSS color format should I use in 2026?
For CSS custom properties and design systems, HSL is the most recommended format because it is easy to manipulate programmatically, you can change lightness independently without affecting hue. For copying colors from design tools or sharing with other developers, HEX remains the standard. For transparency, use RGBA or HSLA. For modern design systems targeting only modern browsers, oklch offers perceptually uniform color scaling.
What is the difference between RGB and RGBA in CSS?
RGB specifies red, green, and blue channel values (0-255) without any transparency. RGBA adds a fourth alpha channel (0-1) that controls opacity: 0 is fully transparent and 1 is fully opaque. For example, rgba(124, 58, 237, 0.5) is the same purple as rgb(124, 58, 237) but at 50% transparency.
What is oklch and should I use it?
oklch is a modern CSS color format (oklch(L C H)) that uses Oklab perceptual color space, making color adjustments look more uniform to the human eye. When you step lightness up or down in oklch, the result looks equally different at every step, unlike HSL where some steps appear larger. It is supported in all modern browsers as of 2024+. Recommended for new design systems; not needed for existing codebases unless you are rebuilding.