It was interesting to discover that there’s a redder red than what I thought was red.
The rgb format is commonly used to represent colors. It works by mixing the three primary colors of light in varying proportions.
rgb(249, 224, 0) / #F9E000
249
224
0
But it’s not easy to tell what color a hex value represents just by looking at it. Try the quiz below to test yourself.
Which color is #2AFE4E?
Pick a color
To make rgb easier to work with, the hsl format was introduced. HSL represents colors using hue, saturation, and lightness — which directly maps to how people think about color. Changing a single axis clearly conveys intent like “brighter/darker” or “more/less vivid” right in the code.
hsl(0deg 100% 50%)
0
100
50
Try the quiz below. (It’s still tricky.)
Which color is hsl(90, 76%, 93%)?
Pick a color
HSL is just a geometric transformation of RGB, so it doesn’t account for how the human eye actually perceives color. In the HSL picker above, try fixing saturation and lightness and adjusting only the hue. Even at the same lightness value, yellow appears bright while blue appears dark.
LCH is a color representation designed to reflect how humans perceive color. The
oklch notation you may have seen in Tailwind or shadcn/ui is an improved
version of LCH.
oklch(0.7 0.2 0)
0.7
0.2
0
If you fix chroma and lightness and adjust only the hue, you’ll notice the perceived brightness stays consistent.
RGB and LCH aren’t just different notations — the underlying color spaces have fundamentally different characteristics. The RGB we use in CSS is actually a representation of sRGB, an output-oriented color space, while LCH is a coordinate system that expresses the perceptually-based LAB reference color space in a more human-friendly way.
The sRGB color space was designed around 1990s monitor capabilities, so its gamut is relatively narrow. Within it, rgb(255,0,0) only means “red channel at maximum” — it doesn’t represent the strongest red a human can perceive.
#ff0000
The LAB color space, on the other hand, is a perceptually-based reference space not tied to any specific display, theoretically encompassing a wider range of colors than sRGB. Since LCH expresses this LAB space using lightness, chroma, and hue axes, it can represent stronger reds that sRGB RGB simply cannot — making RGB’s red feel comparatively less red.
On supported displays, you can see a stronger red like this:
oklch(0.649 0.299 29.0)
This still isn’t the maximum red a human can perceive — display gamut has its limits — but it’s meaningful that we can actually render colors beyond sRGB.
Representation is not neutral. The color space you choose also defines the boundaries of what you can perceive and manipulate.