HEX vs RGB vs HSL vs OKLCH: CSS Color Formats Compared

Yes. A six-digit hex color is three two-digit base-16 numbers for red, green and blue, each from 00 to ff, which is 0 to 255. #1e90ff and rgb(30, 144, 255) are the same sRGB color written two ways, and six digits give 16,777,216 possible colors.

CSS Color 4 accepts 3, 4, 6 or 8 hex digits. The three-digit form is shorthand in which each digit is doubled. The fourth or the seventh and eighth digits are alpha: the specification's example is #0000ffcc, a blue at 80% opacity. Letter case does not matter.

Nothing about which colors are available: hsl() still describes sRGB. It changes the controls. The specification calls RGB "very difficult for humans to gain an intuitive grasp on" and HSL "more intuitive", because you can keep the hue and vary saturation and lightness to get lighter, darker or more muted versions of a color.

Its weakness is that HSL lightness is arithmetic on the RGB values and does not match perceived lightness. The six colors below all have an HSL lightness of 50%.

oklch() describes a color in the Oklab color space using three numbers. L is lightness from 0 to 1, or 0% to 100%. C is chroma, the amount of color: it starts at 0 for gray, and the specification says it is theoretically unbounded but in practice does not exceed 0.5. H is a hue angle in degrees.

Oklab was designed to be perceptually uniform, so two colors with the same L look about equally light whatever their hue. That makes it straightforward to build a set of colors with consistent contrast, and CSS Color 4 points to Oklab for cases where colors need to be evenly spaced perceptually, such as a gradient.

Hue angles are not the same numbers as in HSL. Pure red is 0 in HSL and 29.2 in OKLCH; pure blue is 240 and 264.1.

A gamut is the range of colors a color space or a screen can produce. HEX, rgb() and hsl() can only name colors inside sRGB. oklch() can name colors beyond it, which wide-gamut screens can show. CSS Color 4 puts the volume of sRGB at 0.820 million Lab units and Display P3 at 1.233 million.

A color can be valid CSS and still be out of gamut for the screen showing it. The specification says such a color is gamut mapped for display, giving a similar-looking color with lower chroma. For example, oklch(70% 0.3 150) is outside sRGB. Reducing its chroma until it fits, at the same lightness and hue, gives oklch(70.0% 0.193 150.0), which is #00be58.

That example was computed with the generate.now color converter's own gamut check, which reduces chroma by binary search. Browsers may use a different mapping method and land on a slightly different color.

Use HEX or rgb() when you are handing an exact sRGB color to another tool, a design file or older code.

Use hsl() for a quick lighter or darker variant of a single hue. Use oklch() when you are building a palette, a scale or a gradient and want lightness and contrast to stay consistent across hues, or when you want colors outside sRGB. The formats can be mixed freely in one stylesheet.