CSS Color Formats Explained: Hex, RGB, HSL, and OKLCH

CSS lets you write the same color in several ways. Hex, rgb, hsl, and the newer oklch all describe colors, but each suits a different job: hex is compact, hsl is easy to adjust by hand, and oklch keeps lightness consistent across hues. This guide explains what each format is, how transparency fits in, and when to reach for which. When you need to move a value from one format to another, the Color Converter turns a color into hex, RGB, HSL, HSV, and OKLCH at once.

Hex: the compact default

A hex color is a hash followed by red, green, and blue as two hex digits each, from 00 to ff. It is the most common format because it is short and copy-friendly. A three-digit shorthand doubles each digit, so #f30 means #ff3300, and an optional fourth pair adds alpha. Hex is great for fixed brand colors but hard to tweak by eye, because the digits do not map to anything a human reasons about.

color: #ff0000;        /* pure red */
color: #f00;           /* shorthand for #ff0000 */
color: #ff000080;      /* red at about 50% alpha */

RGB: the same channels in decimal

The rgb() format uses the same red, green, and blue channels as hex, but in decimal from 0 to 255. Modern CSS separates the values with spaces and takes an optional alpha after a slash; the older form uses commas, and rgba() is the legacy way to add alpha. All of these describe colors in the standard sRGB space, exactly like hex.

color: rgb(255 0 0);          /* pure red, modern syntax */
color: rgb(255 0 0 / 50%);    /* red at 50% alpha */
color: rgba(255, 0, 0, 0.5);  /* legacy comma syntax */

HSL: easy for humans to adjust

HSL describes a color as hue, saturation, and lightness. Hue is an angle from 0 to 360 around the color wheel (0 is red, 120 is green, 240 is blue), saturation is a percentage from grey to vivid, and lightness runs from black at 0% to white at 100%. It is the friendliest format for tweaking by hand: to make a shade darker you lower the lightness, and to build a palette you rotate the hue while keeping the other two fixed.

color: hsl(0 100% 50%);        /* pure red */
color: hsl(0 100% 35%);        /* a darker red, lightness lowered */
color: hsl(0 100% 50% / 50%);  /* red at 50% alpha */

OKLCH: consistent lightness and wider color

OKLCH is a newer format built on a perceptually uniform model. It describes a color as lightness, chroma (how colorful it is), and hue. Its advantage is that a given lightness looks equally light to the eye across every hue, which HSL does not manage, so palettes built with oklch stay balanced. It can also reach colors outside sRGB on wide-gamut screens. OKLCH is supported in current browsers, and it is the format many modern design systems now prefer.

color: oklch(0.63 0.26 29);        /* a vivid red */
color: oklch(0.63 0.26 29 / 50%);  /* the same at 50% alpha */
color: oklch(0.7 0.15 250);        /* a blue at the same lightness feel */

Which format should you use?

• Hex: fixed colors and brand values you paste once and rarely edit.
• RGB: when you already think in 0 to 255 channels, or need a quick alpha.
• HSL: adjusting shades by hand and building simple palettes by rotating hue.
• OKLCH: design systems that need even lightness across hues and wide-gamut color.

The good news is you are never locked in. Pick whichever format is easiest for the task, and convert when you need another. Paste any color into the Color Converter to read it back in every format at once, and see how the hex codes in a CSS gradient map to hsl or oklch when you want to fine-tune a blend.

Sources

• MDN: CSS color value
• MDN: hsl() color function
• MDN: oklch() color function