Blend 0.2.3

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

scss
.lch {
  // rebeccapurple
  lch: blend.lch(32.39% 61.25 308.86deg);

  // 60% opacity
  lch-a: blend.lch(32.39% 61.25 308.86deg, 60%);
}
css compiled
.lch {
  lch: rebeccapurple;
  lch-a: rgba(102, 51, 153, 0.6);
}

Related

Used By

@function from()

@function lab()

Color Previews

lch #663399 rgb(102, 51, 153) hsl(270, 50%, 40%)
lch-a #663399 rgba(102, 51, 153, 0.6) hsla(270, 50%, 40%, 0.6)

@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

scss
.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);
}
css compiled
.lab {
  lab: rebeccapurple;
  lab-a: rgba(102, 51, 153, 0.6);
}

Related

Requires

@function lch()

Color Previews

lab #663399 rgb(102, 51, 153) hsl(270, 50%, 40%)
lab-a #663399 rgba(102, 51, 153, 0.6) hsla(270, 50%, 40%, 0.6)