Colors

CSS supports several color formats. Hex and RGB are familiar; HSL is intuitive for humans; OKLCH is the modern choice.

4 min read Level 1/5 #css#colors#hex

What you'll learn

Use hex, rgb, hsl
Recognize OKLCH for modern colors
Add alpha (transparency)

CSS has several color formats. They all describe the same colors — pick by readability and the math you need to do.

Hex

Six digits, RGB:

color: #ff0000;     /* red */
color: #f00;         /* short form — same color */
color: #ff0000aa;    /* with alpha (transparency) */

Compact. Hard to “read” without practice.

RGB / RGBA

color: rgb(255 0 0);          /* modern syntax — space-separated */
color: rgb(255, 0, 0);        /* legacy comma-separated */
color: rgb(255 0 0 / 50%);    /* with alpha */
color: rgba(255, 0, 0, 0.5);  /* legacy with alpha */

HSL — Hue, Saturation, Lightness

color: hsl(0 100% 50%);              /* red   — hue 0° */
color: hsl(120 100% 50%);            /* green — hue 120° */
color: hsl(240 100% 50%);            /* blue  — hue 240° */
color: hsl(0 100% 50% / 50%);        /* with alpha */

Hue — 0–360° around the color wheel
Saturation — 0% (gray) to 100% (full color)
Lightness — 0% (black) to 100% (white), 50% is the “true” color

HSL is human-friendly. Tweaking lightness up or down gives you shades of the same color. Useful for designing palettes.

OKLCH — The Modern Best Choice

OKLCH is perceptually uniform — same lightness number = same visual lightness across hues.

color: oklch(70% 0.2 30);           /* L=70%, chroma=0.2, hue=30 */
color: oklch(70% 0.2 30 / 50%);     /* with alpha */

OKLCH support is excellent in modern browsers. Use it for:

Design systems with consistent color steps
Picking accessible color contrasts
Mixing colors that look uniform

Named Colors

color: red;
color: tomato;
color: cornflowerblue;
color: rebeccapurple;

CSS ships ~150 named colors. Handy for prototypes.

Special Values

Value	Meaning
`transparent`	Fully transparent
`currentColor`	The element’s own `color` value
`inherit`	The parent’s value

currentColor is a small superpower:

button {
  color: tomato;
  border: 1px solid currentColor;   /* border matches text */
}

Where Colors Apply

color: …;            /* text */
background-color: …; /* element background */
border-color: …;     /* border */
fill: …;             /* SVG fill */
stroke: …;           /* SVG outline */
caret-color: …;      /* the text-input cursor */
accent-color: …;     /* form control highlights (checkbox, slider) */

Up Next

Units — px, em, rem, %, vw, ch.

Units →