Color in CSS

Hex, rgb, hsl and the modern relative forms, plus transparency.

.panel {
  color: #e8e8ea;
  background: hsl(230 15% 8%);
  border: 1px solid rgb(255 255 255 / 8%);
}

.panel .muted {
  color: color-mix(in srgb, #e8e8ea 60%, transparent);
}

.accent {
  color: hsl(255 100% 68%);
}

How it works

1. hsl makes a palette easy to reason about: spin the hue.
2. A fourth value is alpha, from 0 to 1 or as a percentage.
3. color-mix blends two colors without a preprocessor.

Keywords and builtins used here

• accent
• background
• border
• color
• hsl
• muted
• panel
• px
• rgb

The run, in numbers

Lines

13

Characters to type

207

Tokens

69

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 55 seconds.

Type this snippet

Step 1 of 4 in Color & type, step 10 of 26 in Selectors & the box model.

← Previous Next →