Inspecting Colors

Similar to Sass built-in tools for inspecting the rgb or hsl values of a color, these functions return LCH and Lab channel values.

For these demos, we’ll inspect the following colors:

Color Previews

@function lightness()

Lab/LCH lightness is not the same as HSL/HWB lightness, so this value will not match the output of Sass built-in color.lightness() function.

Parameters & Return

$color: (color)

The Sass color to inspect

@return (number)

The Lab/LCH “lightness” channel of the color

Example

scss

.lightness {
  papayawhip: blend.lightness(papayawhip);
  rebeccapurple: blend.lightness(rebeccapurple);
  yellow: blend.lightness(yellow);
  deeppink: blend.lightness(deeppink);
}

css compiled

.lightness {
  papayawhip: 95.2285099013%;
  rebeccapurple: 32.3928902843%;
  yellow: 97.6063638398%;
  deeppink: 56.6021977958%;
}

@function a()

Parameters & Return

$color: (color)

The Sass color to inspect

@return (number)

The Lab “a” channel of the color

Example

scss

.a {
  papayawhip: blend.a(papayawhip);
  rebeccapurple: blend.a(rebeccapurple);
  yellow: blend.a(yellow);
  deeppink: blend.a(deeppink);
}

css compiled

.a {
  papayawhip: 2.5338542685;
  rebeccapurple: 38.4293800605;
  yellow: -15.7612401728;
  deeppink: 83.455322503;
}

@function b()

Parameters & Return

$color: (color)

The Sass color to inspect

@return (number)

The Lab “b” channel of the color

Example

scss

.b {
  papayawhip: blend.b(papayawhip);
  rebeccapurple: blend.b(rebeccapurple);
  yellow: blend.b(yellow);
  deeppink: blend.b(deeppink);
}

css compiled

.b {
  papayawhip: 14.6633552255;
  rebeccapurple: -47.7002365955;
  yellow: 93.3871614625;
  deeppink: -4.1338321437;
}

@function chroma()

Parameters & Return

$color: (color)

The Sass color to inspect

@return (number)

The LCH “chroma” channel of the color

Example

scss

.chroma {
  papayawhip: blend.chroma(papayawhip);
  rebeccapurple: blend.chroma(rebeccapurple);
  yellow: blend.chroma(yellow);
  deeppink: blend.chroma(deeppink);
}

css compiled

.chroma {
  papayawhip: 14.8806721597;
  rebeccapurple: 61.2546310339;
  yellow: 94.7078593244;
  deeppink: 83.5576413158;
}

@function hue()

Lab/LCH hue is not the same as HSL/HWB hue, so this value will not match the output of Sass built-in color.hue() function.

Parameters & Return

$color: (color)

The Sass color to inspect

@return (number)

The LCH “hue” channel of the color

Example

scss

.hue {
  papayawhip: blend.hue(papayawhip);
  rebeccapurple: blend.hue(rebeccapurple);
  yellow: blend.hue(yellow);
  deeppink: blend.hue(deeppink);
}

css compiled

.hue {
  papayawhip: 80.1960046439deg;
  rebeccapurple: 308.8564260485deg;
  yellow: 99.5797094625deg;
  deeppink: 357.1642586389deg;
}