Day 39: comma-separated functional color notations

posted on 17.11.2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

On day 11 I've introduced you to space-separated functional color notations. Early color functions like rgb() and hsl() support both the old comma-separated and the new space-separated syntax.

/* ✅ works */
div {
  background-color: rgb(255, 210, 210);
  color: hsl(150, 76%, 20%);
}

/* ✅ works */
div {
  background-color: rgb(255 210 210);
  color: hsl(150 76% 20%);
}

On the other hand, new color functions like lab(), hwb(), lch(), or oklch() only support the space-separated syntax.

/* ✅ works */
div {
  background-color: hwb(0deg 82% 0%);
  color: lab(33% -31 16);
}

/*  ❌ doesn't work */
div {
  background-color: hwb(0deg, 82%, 0%);
  color: lab(33%, -31, 16);
}

See on CodePen

Day 39: comma-separated functional color notations

Further reading