Skip to content

CSS color formats, explained

CSS gives you several ways to write the same color. A button background can be #2563eb, rgb(37 99 235), hsl(217 91% 60%), or an OKLCH value. The browser may paint the same blue, but the format you choose changes how easy the color is to edit, compare, document, and adjust.

That is why color formats are not just syntax trivia. HEX is compact. RGB maps directly to screen channels. HSL is easier for many people to reason about by hue, saturation, and lightness. OKLCH is useful when you want more predictable changes in perceived lightness and chroma. Alpha channels control transparency. Contrast decides whether people can actually read the result.

This guide explains the formats you will see most often, when each one is useful, and how to convert a color without losing sight of accessibility and browser support.

HEX colors

HEX is the old familiar web color format.

Example: 

#2563eb

That value is made from three pairs of hexadecimal digits: 

25 63 eb

Those pairs represent red, green, and blue.

HEX is popular because it is short, easy to copy from design tools, and widely supported. It is a good fit for static color tokens, documentation, and quick design handoff.

HEX can also include alpha in eight-digit form: 

#2563ebcc

The last pair controls transparency. The downside is readability. Many people can glance at rgb(37 99 235 / 80%) and understand the alpha faster than #2563ebcc.

RGB

RGB describes a color by red, green, and blue channels.

Modern CSS can write it like this: 

rgb(37 99 235)

With alpha: 

rgb(37 99 235 / 0.8)

RGB is useful when you need to match screen channel values exactly, work with canvas or image data, or read color values from browser tools.

It is less pleasant when you want to make a color "a little lighter" or "less saturated." You can change the channel values by hand, but the edits do not line up neatly with how people describe colors.

HSL

HSL describes color as hue, saturation, and lightness.

Example: 

hsl(217 91% 60%)

Hue is the color angle. Saturation is the intensity. Lightness is how dark or light the color is.

HSL is useful when you are making related colors by hand. You might keep the hue and saturation, then move lightness up or down for hover states, borders, and backgrounds.

That is easier to reason about than editing RGB channels. Still, HSL is not perfectly aligned with human perception. Two colors with the same HSL lightness can still feel uneven in a real interface.

HSV and HWB

HSV and HWB are not as common in handwritten CSS, but you may see them in design tools and color pickers.

HSV stands for hue, saturation, and value. It is common in picker UIs because it maps nicely to the color square many designers use.

HWB stands for hue, whiteness, and blackness. It can feel natural when you think about mixing a hue with white or black.

These formats can be helpful in tools, even if your final CSS tokens end up as HEX, RGB, HSL, or OKLCH.

OKLCH

OKLCH is a newer CSS color format based on the Oklab color space. It represents color with lightness, chroma, and hue.

Example: 

oklch(0.58 0.19 260)

The big appeal is perceptual behavior. Adjusting lightness in OKLCH often feels more predictable than adjusting HSL lightness because the space was designed to line up better with human color perception.

That makes OKLCH attractive for design systems, color scales, and theme generation. For example, you can keep a hue and chroma related while changing lightness across steps in a palette.

There are still practical checks. Some OKLCH colors are outside the sRGB gamut and may need conversion or clipping for normal screens. Older browser environments can also be a concern, so production design systems often pair newer color syntax with testing and fallback strategy.

Alpha channels

Alpha controls transparency.

In modern CSS, alpha can appear in several formats: 

rgb(37 99 235 / 0.5)
hsl(217 91% 60% / 50%)
oklch(0.58 0.19 260 / 0.5)
#2563eb80

Alpha is useful for overlays, shadows, disabled states, focus rings, and subtle borders.

The catch is that transparent colors depend on what sits behind them. A blue at 50% alpha on white does not look the same as the same blue at 50% alpha on black. If contrast matters, test the final color in context, not only the color token in isolation.

Contrast concerns

A color that looks good on a palette card can fail as text.

Contrast depends on foreground, background, font size, weight, and state. Pale gray text on white may look elegant in a mockup and still be hard to read. A brand color that works for a large button background may fail for small text.

Good color work includes checking:

  • text against its real background
  • hover and disabled states
  • focus outlines
  • dark mode and light mode variants
  • charts and indicators that should not rely on hue alone

Color conversion does not solve accessibility by itself. It helps you translate formats. You still need to test the final pairings people will see.

A worked conversion example

Start with this HEX color: 

#2563eb

Break it into RGB pairs: 

25 63 eb

Convert each pair from hexadecimal to decimal: 

0x25 = 37
0x63 = 99
0xeb = 235

So the RGB form is: 

rgb(37 99 235)

The same color can also be represented approximately as: 

hsl(217 91% 60%)

And an OKLCH form may look like: 

oklch(0.58 0.19 260)

If you want 80% opacity, you can write: 

rgb(37 99 235 / 0.8)

or: 

#2563ebcc

The painted color is the goal. The format is the interface you choose for editing, sharing, and maintaining it.

Try it in your browser

Our Color Converter helps you move between HEX, RGB, HSL, and related color formats without doing channel math by hand.

Use it when you need to:

  • turn a design-tool HEX value into CSS RGB or HSL
  • compare how the same color is written across formats
  • add or understand alpha transparency
  • prepare color tokens for a design system
  • inspect a color before writing it into code

It runs in your browser, so quick conversion work stays local.

Common mistakes

Choosing a format only because it is short. HEX is compact, but HSL or OKLCH may be easier to edit in a theme.

Forgetting that alpha depends on the background. Transparent colors are not fixed visual colors until they are placed over something.

Treating HSL lightness as perfect perceived lightness. It is useful, but it does not always match how people see brightness across hues.

Ignoring out-of-gamut colors. Some newer color values may need clipping or fallback when shown on normal sRGB screens.

Checking contrast only once. States and themes can change the foreground-background pair.

FAQ

Use HEX for compact fixed tokens, RGB when channel values matter, HSL for simple hand edits, and OKLCH when perceptual palette work matters.

It is supported in modern browsers, but you should still test your audience and consider fallbacks if older environments matter.

HEX is another way to write RGB channel values. #2563eb and rgb(37 99 235) describe the same sRGB color.

Use an alpha channel, such as rgb(37 99 235 / 0.5), hsl(217 91% 60% / 50%), or eight-digit HEX.

It should not when the target format can represent the same color. Rounding, gamut limits, and color-space conversion can introduce small changes.

Related guides