CSS Drops Commas from Color Functions

Recent viral tweets from Adam Argyle and Mathias Bynes highlight a long-overdue syntax change in CSS: color functions no longer require comma separators. Previously, each color function needed a separate variant for transparency support. The new syntax eliminates that duplication and aligns more closely with the rest of CSS grammar.

/* Old Syntax */
rgb(0, 128, 255)

rgba(0, 128, 255, 0.5)

hsl(198, 38% 50%)

hsla(198, 28%, 50%, 0.5)
/* New Syntax */
rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

lab(56.29% -10.93 16.58 / 50%)

lch(56.29% 19.86 236.62 / 50%)

color(sRGB 0 0.50 1 / 50%)

Notes and Implications

  • Browser support is strong — everything except IE 11 handles the space-separated notation.
  • For IE 11, developers can rely on PostCSS preset-env, which transforms the syntax automatically, or use the narrower postcss-color-rgb plugin. (Oddly, no equivalent exists for HSL.)
  • Existing code will not break: no vendor will remove support for comma-based syntax since it remains critical for legacy sites.
  • The main reason to adopt the new form early is consistency — newer color functions like lab, lch, and color will only accept the space-separated syntax.
  • A hybrid form still works: passing an opacity value to rgb() with commas, such as rgb(255, 0, 0, 0.5), remains valid.
  • Sass support is reportedly tricky to implement, and users have resorted to workarounds. If the preprocessor cannot catch up, it risks losing developer trust.
  • Prettier could theoretically normalize styles by converting comma syntax to the new format, but the project has declined — its policy is not to alter the AST.
  • DevTools will likely begin displaying colors in the space-separated format, which will push broader adoption.
  • Hex colors also gained an extended format recently with 8-digit notation, signaling an ongoing evolution in how CSS handles color.