CSS Color Values: Named, HEX, RGB, HSL, and Modern Functions

How CSS Expresses Color

CSS gives you more ways to write colors than most developers realize. What started as 16 named colors and hex codes has grown into a rich system of functions, spaces, and modern syntax. Understanding the full palette helps you pick the right format for each situation.

Named Colors

CSS defines 148 named colors from aliceblue to zz (reaching yellowgreen). Common names like red, blue, and green are easy to remember. Names like coral, tomato, and steelblue give you decent options without looking up hex codes.

Named colors work well for quick prototypes and semantic tokens. For production UIs, you will usually switch to numeric formats that offer precise control.

HEX Values

Hexadecimal notation is the most common way to write colors in CSS. A six-digit hex value specifies red, green, and blue channels using base-16 numbers.

.element {
  color: #4f46e5;     /* 6-digit: R=4F, G=46, B=E5 */
  color: #48e;        /* 3-digit shorthand: #4488EE */
  color: #4f46e580;   /* 8-digit with alpha (50%) */
}

Three-digit shorthand expands each digit: #abc becomes #aabbcc. Eight-digit hex adds an alpha channel where 00 is fully transparent and ff is fully opaque.

Hex is compact and widely supported. The downside is readability — you cannot tell at a glance that #4f46e5 is indigo.

RGB and RGBA

The rgb() function expresses colors using decimal values from 0 to 255 for each channel.

.element {
  color: rgb(79, 70, 229);
  color: rgb(79 70 229);           /* Modern space-separated syntax */
  color: rgb(79 70 229 / 50%);    /* With 50% alpha */
  color: rgba(79, 70, 229, 0.5);  /* Legacy rgba() syntax */
}

Modern CSS accepts space-separated values and uses a slash for alpha. The legacy rgba() function still works but the a is now redundant — rgb() handles alpha too.

RGB is intuitive for anyone who understands additive color mixing. It maps directly to hex values, making conversion straightforward.

HSL and HSLA

HSL stands for Hue, Saturation, and Lightness. It is often more intuitive than RGB because you can adjust lightness or saturation independently.

.element {
  color: hsl(239, 74%, 59%);
  color: hsl(239 74% 59%);        /* Modern syntax */
  color: hsl(239 74% 59% / 50%);  /* With alpha */
}

HSL makes it easy to create color variations by adjusting a single parameter. Need a lighter version? Increase lightness. Need a muted tone? Decrease saturation.

Modern Color Functions

CSS Color Level 4 introduced several new ways to specify colors with wider gamuts and perceptual uniformity.

oklch()

oklch() is the most promising modern color function. It separates color into Lightness, Chroma (saturation), and Hue in a perceptually uniform space.

.element {
  color: oklch(0.55 0.22 264);    /* L, C, H */
  color: oklch(0.55 0.22 264 / 50%); /* With alpha */
}

The key advantage: equal changes in lightness produce equal perceived brightness differences. This solves the problem where HSL lightness does not match human perception — yellow at 50% HSL lightness looks much brighter than blue at 50%.

color-mix()

color-mix() lets you blend two colors in any color space.

.element {
  color: color-mix(in oklch, #4f46e5, #f97316);
  color: color-mix(in oklch, #4f46e5 80%, #f97316);
}

This is powerful for creating hover states, borders, and subtle variations without computing values manually.

Relative Color Syntax

Relative color syntax lets you modify an existing color by adjusting individual channels.

.element {
  --base: #4f46e5;
  color: oklch(from var(--base) calc(l + 0.1) c h);  /* Lighter */
  background: oklch(from var(--base) l c calc(h + 30));  /* Hue shifted */
}

This replaces manual calculations for hover states, focus rings, and palette generation.

Browser Support

For production use with modern functions, add fallbacks or use @supports queries.

Choosing the Right Format

Key Takeaways

• CSS supports named, hex, rgb, hsl, oklch, and several other color formats.
• Modern rgb() and hsl() accept space-separated values and alpha in one function.
• oklch() offers perceptual uniformity and wider gamut support.
• color-mix() and relative color syntax eliminate manual color math.
• Use hex for compactness, hsl for variations, and oklch for perceptually accurate palettes.

Try It Yourself

Convert between HEX, RGB, and HSL instantly with the HEX to RGB Converter.

Related Guides

• HEX to RGB Guide — Understanding color code conversions
• Color Models Explained — HEX, RGB, HSL, and CMYK