CSS Color Value Formats

CSS supports several color value formats. Each represents the same color in a different way, and each has different advantages depending on your use case.

1. Named Colors

The simplest format — use a predefined English name. CSS supports 148 named colors.

h1 {
  color: tomato;
}
p {
  color: steelblue;
}

2. HEX Values

A 6-digit hexadecimal code preceded by #. Each pair represents Red, Green, and Blue (00–FF). A 3-digit shorthand is also supported where each digit is doubled.

/* 6-digit HEX */
.box { color: #FF6347; }      /* Tomato */

/* 3-digit HEX shorthand */
.box { color: #F00; }         /* Same as #FF0000 (Red) */

/* 8-digit HEX with alpha */
.box { color: #FF634780; }    /* Tomato at 50% opacity */

3. RGB / RGBA Values

Specify Red, Green, and Blue channels as numbers from 0 to 255. RGBA adds an alpha channel (0.0 to 1.0) for transparency.

/* Opaque */
.solid { background: rgb(255, 99, 71); }

/* 50% transparent */
.transparent {
  background: rgba(255, 99, 71, 0.5);
}

4. HSL / HSLA Values

HSL stands for Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). This is often the most intuitive format for designers because adjusting lightness or saturation is straightforward.

/* Pure red at full saturation, 50% lightness */
.box { color: hsl(0, 100%, 50%); }

/* Desaturated red (grayish) */
.box { color: hsl(0, 30%, 50%); }

/* With alpha transparency */
.box { color: hsla(0, 100%, 50%, 0.5); }

5. HWB Values

HWB stands for Hue, Whiteness, and Blackness. It describes how much white and black are mixed into a pure hue color.

/* HWB syntax */
.box { color: hwb(0 0% 0%); }     /* Pure red */
.box { color: hwb(0 50% 0%); }    /* Red + 50% white = pink */
.box { color: hwb(0 0% 50%); }    /* Red + 50% black = dark red */

6. CMYK (for reference)

CMYK stands for Cyan, Magenta, Yellow, Key (Black). It is primarily used in print design. While not natively supported in CSS, understanding it helps when converting between digital and print colors.

Interactive Color Format Converter

Use the RGB sliders or enter a HEX code to see a color in all formats simultaneously. Click any value to copy it.

Choosing the Right Format