Modern Color Syntax

Modern Color Syntax

The space-separated (Level 4) color syntax is cleaner than commas.

rgb() with spaces and slash alpha

p {
  color: rgb(255 0 0);          /* red, no commas */
  color: rgb(255 0 0 / 0.5);    /* 50% opacity */
  color: rgb(255 0 0 / 50%);    /* percentage alpha */
}

The old way still works

rgb(255, 0, 0, 0.5) remains valid. Both accepted!

Channel ranges

• 0-255 or 0%-100% per channel.
• Alpha: 0-1 or 0%-100%.

hsl() same style

p {
  color: hsl(120 100% 50%);
  color: hsl(120 100% 50% / 0.4);
}

Naming

The modern name: they all take the "space syntax", much nicer for readability.

TL;DR

• New: rgb(255 0 0 / 0.5), hsl(120 100% 50%).
• Slash separates the alpha channel.
• Legacy comma syntax still supported.
• Same colors, cleaner writing.