Understanding CSS Color Representations and Conversion Methods

The article introduces the fundamentals of color representation in web development, covering the evolution from monochrome to wide‑gamut displays and the necessity of handling colors in CSS.

It details the most common CSS color notations, starting with rgb/rgba , explaining the hexadecimal format, shorthand forms, and the addition of alpha transparency in 8‑digit notation, along with current browser support tables.

Next, it examines hsl/hsla as a more human‑readable alternative, describing hue, saturation, and lightness parameters, providing visual examples, and noting full browser support.

The article then discusses the hwb model (an alias of HSV), its relationship to HSL, and the current lack of browser implementation.

It proceeds to advanced color spaces such as Lab and Lch , their origins in CIE standards, the meaning of L, a, b components, and the fact that these are still in the proposal stage without browser support.

Support for specifying custom color spaces is demonstrated with color() functions and @color-profile rules, showing how to reference ICC profiles like swopc, indigo, and prophoto.

The article also covers the device‑cmyk model for print media, providing a CSS example that maps CMYK values to equivalent RGB colors.

For interoperability, it suggests using PostCSS or polyfills to convert unsupported color notations, and presents several conversion algorithms, including JavaScript implementations for hslToRgb, hueToRgb, hwbToRgb, linear‑sRGB transformations, and chromatic adaptation between D65 and D50.

function hslToRgb(hue, sat, light) {
  if (light <= .5) {
    var t2 = light * (sat + 1);
  } else {
    var t2 = light + sat - (light * sat);
  }
  var t1 = light * 2 - t2;
  var r = hueToRgb(t1, t2, hue + 2);
  var g = hueToRgb(t1, t2, hue);
  var b = hueToRgb(t1, t2, hue - 2);
  return [r, g, b];
}

function hueToRgb(t1, t2, hue) {
  if (hue < 0) hue += 6;
  if (hue >= 6) hue -= 6;
  if (hue < 1) return (t2 - t1) * hue + t1;
  else if (hue < 3) return t2;
  else if (hue < 4) return (t2 - t1) * (4 - hue) + t1;
  else return t1;
}

function hwbToRgb(hue, white, black) {
  var rgb = hslToRgb(hue, 1, .5);
  for (var i = 0; i < 3; i++) {
    rgb[i] *= (1 - white - black);
    rgb[i] += white;
  }
  return rgb;
}

Additional functions for linear‑sRGB, gamma correction, XYZ conversion, and chromatic adaptation are provided to enable precise color space transformations.

In conclusion, the article summarizes that the CSS color standard offers a rich set of representations with varying browser support, and developers can rely on supported methods while using polyfills or conversion utilities for the newer, unsupported specifications.