Lab & LCH Formats
Lab and LCH provide a perceptually uniform color space. These functions are based on the CSS specification, but eagerly converted to Sass sRGB.
While we are using the same math recommended for browsers, this sort of color-space conversion involves gamut-adjustments and rounding. In a pre-processor, that math is compiled once, and the original data is not maintained. A color converted into Sass (sRGB) format and then back to CIE may be slightly different from the original.
We use chroma-reduction to achieve a relative-colormetric closest match for CIE colors that fall outside the sRGB gamut.
Related
CSS specification [external]
@function lch()
Define Sass colors in lch() syntax.
Parameters & Return
$lch: (list)
A space-separated list of lightness, chroma, and hue channel values.
- lightness is a percentage (0%-100%)
- chroma is a positive number (generally 0-100)
- hue is an angle (0deg-360deg)
$a: 100% (number)
Alpha opacity, as either a unitless fraction (0-1) or a percentage (0%-100%)
@return (color)
Converted sRGB value
Example
.lch {
// rebeccapurple
lch: blend.lch(32.39% 61.25 308.86deg);
// 60% opacity
lch-a: blend.lch(32.39% 61.25 308.86deg, 60%);
}.lch {
lch: rgb(102, 51, 153);
lch-a: rgba(102, 51, 153, 0.6);
}Related
CSS lch() specification [external]
Color Previews
@function lab()
Define Sass colors in lab() syntax.
Parameters
$lab: (list)
A space-separated list of lightness, a, and b channel values
- lightness is a percentage (0%-100%)
- a & b are both numbers (±160)
$a: 100% (number)
Alpha opacity, as either a unitless fraction (0-1) or a percentage (0%-100%)
Example
.lab {
// rebeccapurple
lab: blend.lab(32.39% 38.43 -47.69);
// 60% alpha opacity
lab-a: blend.lab(32.39% 38.43 -47.69, 0.6);
}.lab {
lab: rgb(102, 51, 153);
lab-a: rgba(102, 51, 153, 0.6);
}