HEX vs RGB vs HSL vs OKLCH

If you have ever wondered how hex, rgb, hsl, and oklch differ, you are asking the right question. They are four ways to write the same idea, a color, but they are not equally good at every job. Hex and RGB describe colors the way a screen mixes light. HSL tries to describe them the way humans think. And OKLCH, the newest, describes them the way humans actually see, which makes it the best choice for building color scales.

This guide is for designers and developers who want to understand color models without a math degree. I will explain what each model is in plain words, give you a side-by-side comparison table, show why OKLCH produces more even scales with a real swatch comparison, and cover how the models convert into one another. By the end you will know exactly which model to reach for and why. Let us decode the codes.

Key takeaways

HEX: the codes you already know

A hex code like #5b5bd6 is the most common way to write a color on the web. The hash is followed by six characters in base-16, where each pair gives the amount of red, green, and blue. So #5b5bd6 is 5b red, 5b green, and d6 blue.

Hex is just RGB in a compact form. It is easy to copy, paste, and share, which is why it is everywhere. The downside is that it is unreadable to humans. You cannot look at #5b5bd6 and know it is a soft indigo, and you cannot tell how to make it 10 percent lighter.

RGB: how screens make color

RGB describes a color as a mix of red, green, and blue light, each from 0 to 255. Your screen has tiny red, green, and blue lights in every pixel, so RGB maps directly to the hardware. The color #5b5bd6 is rgb(91, 91, 214).

Because it adds light, RGB is an additive model. All three at full is white, all three at zero is black. This matches the physical reality of a display, but like hex, it is not intuitive. Knowing a color is rgb(91, 91, 214) does not tell you how to nudge its lightness without shifting the hue.

HSL: built for humans, but flawed

HSL was created to be more intuitive. It describes a color by hue, saturation, and lightness. Hue is the angle on the color wheel from 0 to 360, saturation is how vivid it is, and lightness is how light or dark.

This is much easier to reason about. To make a color lighter you raise the L value, and to shift the hue you change the H. For years HSL was the friendly model for designers, and it is a big improvement over raw hex.

The hidden problem with HSL

HSL has a serious flaw: its lightness is not perceptual. Two colors with the same L value can look wildly different in brightness to your eye. A yellow at 50 percent lightness looks far brighter than a blue at 50 percent lightness.

This breaks color scales. If you build a ladder by stepping the L value evenly in HSL, the steps will look uneven, with some jumps tiny and others huge. That makes accessible, predictable scales hard to build, which is exactly the job a palette needs.

OKLCH: how we actually see

OKLCH is the modern answer. It describes a color by perceptual lightness, chroma, and hue. The key word is perceptual: when you change the L value, the change in brightness matches what your eye sees, across every hue.

The letters stand for the parts. L is lightness from 0 to 1, C is chroma, which is how colorful or muted it is, and H is hue, the angle from 0 to 360. So oklch(0.55 0.18 280) is a medium-light, fairly colorful indigo.

Why OKLCH builds better scales

Because OKLCH lightness is perceptual, stepping the L value evenly gives you a scale that looks evenly spaced. No tiny jumps, no huge ones. Every step is a usable, distinct shade, which is exactly what a 50 through 950 ladder needs.

It also keeps hue consistent as you lighten and darken, so a scale stays recognizably the same color from top to bottom. This is hard in HSL, where lightening can drift the hue. The result is palettes that are even, predictable, and easier to make accessible.

This is why the Zepixo Colors workspace generates every scale in OKLCH. It is also why Tailwind v4 ships its default palette in OKLCH. For a deeper dive, see our what is OKLCH guide and Tailwind color scale walkthrough.

The comparison table

Here is the full side by side. Notice that the trade-off is between how the screen works and how the eye works.

One more point in OKLCH's favor: it can describe colors beyond the old sRGB range, on modern wide-gamut displays. Hex, RGB, and HSL are all tied to sRGB. As more screens support wider color, OKLCH future-proofs your palette.

How the models convert

All four describe colors in the same world, so they convert into one another. Some conversions are simple, and one is genuinely complex.

Hex and RGB

Hex and RGB are the same model in different notation, so converting is trivial. You split the hex into three pairs and read each as a number from 0 to 255. So #5b5bd6 becomes rgb(91, 91, 214) by converting 5b, 5b, and d6 from base-16.

RGB and HSL

RGB to HSL is a fixed mathematical formula. It finds the dominant hue, measures saturation, and computes lightness from the red, green, and blue values. It is exact and reversible, just not something you do in your head.

Into and out of OKLCH

OKLCH is the complex one. Converting to or from OKLCH goes through a perceptual color space, not a simple formula on the RGB values. In practice you never do this by hand. Tools and CSS handle it for you, and modern CSS even lets you write oklch() directly.

The good news is you rarely need to convert manually. A generator works in OKLCH internally and exports hex, RGB, or CSS for you. The OKLCH color picker and this deep explainer from Evil Martians are great references, as is the MDN oklch() page.

Which model should you use?

The honest answer is you will use several, each for its strength. Here is the simple rule of thumb.

• Use hex to share and store individual colors, since it is compact and universal.
• Use RGB when you need to think about how a screen mixes light, like in some graphics code.
• Use HSL for quick, intuitive tweaks when perfect even spacing does not matter.
• Use OKLCH whenever you build a scale or a palette, because its even, perceptual lightness is exactly what scales need.

For brand and product work, OKLCH is the model that matters most, because palettes are scales. You can still export hex for the rest of your tooling. The Zepixo Colors workspace gives you both: OKLCH under the hood and hex, CSS, Tailwind, JSON, or SCSS on export.

Want even, accessible scales without the math? Open the Zepixo Colors workspace to generate OKLCH scales from one color and export them as hex, CSS, or Tailwind. See the colors overview for the model details.

A practical example

Say you have a brand color #5b5bd6 and want a usable scale. In HSL you might step the L value from 95 percent down to 15 percent in even jumps. The result looks uneven, with the light end barely changing and the dark end lurching.

In OKLCH you step the L value from about 0.97 down to 0.30, and the scale looks evenly spaced to your eye. The light tints are distinct, the mid shades are usable, and the dark shades read as the same indigo. That is the difference perceptual lightness makes, and why it is worth the slightly harder math you never have to see.

Frequently asked questions

What is the difference between hex and RGB?

They are the same model in different notation. Hex writes the red, green, and blue values in base-16, while RGB writes them as numbers from 0 to 255. So #5b5bd6 and rgb(91, 91, 214) are the same color.

Why is HSL bad for color scales?

Because its lightness is not perceptual. Two colors with the same L value can look very different in brightness, so stepping L evenly produces uneven-looking steps. This makes predictable, accessible scales hard to build in HSL.

What does OKLCH stand for?

It stands for OK Lightness, Chroma, Hue. L is perceptual lightness from 0 to 1, C is chroma or colorfulness, and H is the hue angle. The OK refers to the OKLab perceptual color space it is based on.

Is OKLCH supported in browsers?

Yes, all modern browsers support the oklch() function in CSS. For older browsers you can export hex or RGB fallbacks, which tools do automatically. Tailwind v4 ships its default colors in OKLCH.

Do I need to convert colors to OKLCH by hand?

No. Converting to and from OKLCH goes through a perceptual color space and is not simple mental math. Generators and CSS handle it for you, so you work in OKLCH and export hex or RGB as needed.

Which color model should I use for a brand palette?

Use OKLCH to build the scales, because its perceptual lightness gives even, predictable steps. Then export hex or CSS for the rest of your tooling. This gives you accessible scales without giving up universal compatibility.

Use hex to share, RGB for screens, HSL for quick tweaks, and OKLCH to build real scales. Know the trade-offs and you will always pick the right one. Happy coloring.