Color Formats: HEX, RGB, HSL Explained
Understanding the different CSS color formats — when to use HEX, RGB, HSL, and oklch in 2026.
Published:
Tags: CSS color formats explained, color format comparison, CSS color spaces
Color Formats: HEX, RGB, HSL Explained CSS supports more than a dozen color formats. Each has different strengths — for readability, manipulation, or extended color gamuts. Here's when to use each. For a full overview of color utilities, see the Color Tools for Designers and Developers guide. To convert between any of these formats, use the Color Converter. --- What is the format overview? | Format | Since | Gamut | Best For | |---|---|---|---| | Named colors | CSS1 | sRGB | Prototyping | | / | CSS1 | sRGB | Design handoff, static values | | / | CSS1 | sRGB | JavaScript manipulation | | / | CSS3 | sRGB | Dynamic theming | | | CSS4 | sRGB | Human-readable alternatives | | / | CSS4 | Wide gamut | Design systems, color science | | / | CSS4 | Wide gamut | Modern design systems | | | CSS4 |…
Frequently Asked Questions
What are the different CSS color formats?
CSS supports named colors (140 keywords), hex notation (#RRGGBB), RGB/RGBA functions, HSL/HSLA functions, HWB, Lab, LCH, oklch, and the color() function for non-sRGB spaces. In practice, most projects use a combination of hex for static values, HSL for dynamic manipulation, and rgba for transparency.
What is the difference between RGB and HSL?
RGB specifies color as red, green, and blue channel intensities (0–255 each). HSL specifies color as hue angle (0–360°), saturation percentage (0–100%), and lightness percentage (0–100%). RGB maps to display hardware. HSL maps to human perception — you can darken by adjusting one value, which requires recalculating all three channels in RGB.
What is the oklch color format?
oklch is a CSS Color Level 4 format that uses perceptually uniform lightness (L), chroma (C), and hue angle (H). 'Perceptually uniform' means equal numerical lightness values look equally bright across all hues — unlike HSL where some hues appear lighter at the same L value. oklch is increasingly adopted for design systems that need reliable cross-hue contrast calculations.
What is the sRGB color space?
sRGB is the standard color space used by monitors, web browsers, and most digital images. It defines a specific range of displayable colors (a 'gamut'). All standard CSS color formats (hex, rgb, hsl) operate within sRGB. Wide-gamut displays (like Display P3 on Apple devices) can show colors outside sRGB — accessible via the CSS `color()` function.
How do I use CSS color-mix()?
The `color-mix()` function blends two colors in a specified color space. Syntax: `color-mix(in hsl, red 30%, blue)`. The percentage specifies how much of the first color to include; the remainder comes from the second. It's supported in Chrome 111+, Safari 16.2+, Firefox 113+. Useful for generating tints, shades, and hover states without JavaScript.
All articles · theproductguy.in