Blend 0.2.3

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

papayawhip #ffefd5 rgb(255, 239, 213) hsl(37, 100%, 92%)
rebeccapurple #663399 rgb(102, 51, 153) hsl(270, 50%, 40%)
yellow #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
deeppink #ff1493 rgb(255, 20, 147) hsl(328, 100%, 54%)

@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;
}