Sass Color Spaces

Archived:

🚚 This content is being maintained elsewhere. Our notes are likely out-of-date.

See the official Sass proposal for details.

Historically CSS has been limited to a single color model (RGB) and gamut (sRGB). Authors have various formats to describe colors in that gamut – using cubic hex notation #rgb/#rrggbb/#rrggbbaa and functions rgb()/rgba(), or cylindrical/polar-angle functions hsl()/hwb().

Unfortunately, sRGB is a relatively narrow color gamut, and RGB isn’t a perceptually uniform model. Many monitors now support wider color gamuts (such as the popular display-p3), and there has also been significant progress in developing more perceptually uniform color spaces such as CIE LAB/okLAB.

The CSS Colors level 4 specification describes how CSS authors can access these newer gamuts & formats – with okLAB as the default space for color-mixing. We want to provide support for this in Sass: with server-side tools to manage colors across spaces, and convert colors between spaces where appropriate.

Related Notes