Relative Colors

The primary advantage of LCH color is the ability to generate one color from another by adjust channels, and expect consistent results.

@function set()

Set individual Lab or LCH channels to specific values, and return the adjusted color. All arguments must be given by keyword, rather than positional order.

Parameters & Return

$color: (color)

The initial Sass color being adjusted

$lightness: null (percentage)

Set lightness to a percentage between 0 and 100% (Can also use the $l keyword shorthand)

$chroma: null (number)

Set chroma to a positive number (generally 0-100) (Can also use the $c keyword shorthand)

$hue: null (angle)

Set hue to an angle (0deg-360deg) (Can also use the $h keyword shorthand)

$a: null (number)

Set the Lab a channel to any number ±160

$b: null (number)

Set the Lab b channel to any number ±160

@error

Cannot set both Lab & LCH channels at once

Example

scss

.set {
  chroma: blend.set(rebeccapurple, $chroma: 20);
  shorthand: blend.set(rebeccapurple, $c: 20);
}

css compiled

.set {
  chroma: rgb(87, 70, 101);
  shorthand: rgb(87, 70, 101);
}

@function adjust()

Adjust individual Lab or LCH channels up or down by a given amount, and return the adjusted color. All arguments must be given by keyword, rather than positional order.

Parameters & Return

$color: (color)

The initial Sass color being adjusted

$lightness: null (number)

Adjust lightness by given amount (Can also use the $l keyword shorthand)

$chroma: null (number)

Adjust chroma by given amount (Can also use the $c keyword shorthand)

$hue: null (number)

Adjust hue by given number of degrees (Can also use the $h keyword shorthand)

$a: null (number)

Adjust Lab a by given amount

$b: null (number)

Adjust Lab b by given amount

@error

Cannot adjust both Lab & LCH channels at once

Example

scss

.set {
  hue: blend.adjust(rebeccapurple, $hue: -60);
  shorthand: blend.adjust(rebeccapurple, $h: -60);
}

css compiled

.set {
  hue: rgb(0, 82, 120);
  shorthand: rgb(0, 82, 120);
}

@function scale()

Fluidly scale Lab or LCH channels up or down by a given percentage, and return the adjusted color. All arguments must be given by keyword, rather than positional order.

Parameters & Return

$color: (color)

The initial Sass color being adjusted

$lightness: null (percentage)

Scale lightness by given percentage of the distance towards 0 or 100 (Can also use the $l keyword shorthand)

$chroma: null (percentage)

Scale chroma by given percentage of the distance towards 0 or 100 (Can also use the $c keyword shorthand)

$hue: null (percentage)

Adjust hue by given percentage of the hue wheel (Can also use the $h keyword shorthand)

$a: null (percentage)

Scale Lab a by given percentage of the distance towards 160 or -160

$b: null (percentage)

Scale Lab b by given percentage of the distance towards 160 or -160

@error

Cannot scale both Lab & LCH channels at once

@error

Scales must be defined using % units

Example

scss

.set {
  lightness: blend.adjust(rebeccapurple, $lightness: 50%);
  shorthand: blend.adjust(rebeccapurple, $l: 50%);
}

css compiled

.set {
  lightness: rgb(227, 192, 255);
  shorthand: rgb(227, 192, 255);
}

Requires

@function error() [private]

@function from()

We also provide a compact syntax for LCH adjustments, based on the proposed CSS relative color syntax. Since Sass is not able to mimic the syntax exactly, we’ve developed a shorthand based on the CSS proposal.

For each channel:

The single-letter channel name (l | c | h) represents no change to the current value of the channel
A single number will replace the current channel value
A number with l | c | h units will multiply the channel
l | c | h followed by a percentage will scale the channel relative to available range
l | c | h followed by an amount will add or subtract that amount from the current value

Parameters & Return

$color: (color)

The initial Sass color being adjusted

$l: l (l | number | l number)

Adjustments to the l channel:

$c: c (c | number | c number)

Adjustments to the c channel

$h: h (h | number | h number)

Adjustments to the h channel

@return (color)

The final color after adjustments

Example

scss

.from {
  // set chroma to 20
  set: blend.from(rebeccapurple, l, 20, h);

  // linear adjustments to a channel
  adjust: blend.from(rebeccapurple, l, c, h -60);

  // relative scale, e.g. "half-way to white"
  scale: blend.from(rebeccapurple, l 50%, c, h);

  // multiply the channel value
  multiply: blend.from(rebeccapurple, 2l, c, h);
}

css compiled

.from {
  set: rgb(87, 70, 101);
  adjust: rgb(0, 82, 120);
  scale: rgb(195, 136, 248);
  multiply: rgb(191, 133, 244);
}

Relative Colors

Related

CSS Colors Level 5 [external]

@function set()

Parameters & Return

$color: (color)

$lightness: null (percentage)

$chroma: null (number)

$hue: null (angle)

$a: null (number)

$b: null (number)

@error

Example

@function adjust()

Parameters & Return

$color: (color)

$lightness: null (number)

$chroma: null (number)

$hue: null (number)

$a: null (number)

$b: null (number)

@error

Example

@function scale()

Parameters & Return

$color: (color)

$lightness: null (percentage)

$chroma: null (percentage)

$hue: null (percentage)

$a: null (percentage)

$b: null (percentage)

@error

@error

Example

Requires

@function error() [private]

@function from()

Parameters & Return

$color: (color)

$l: l (l | number | l number)

$c: c (c | number | c number)

$h: h (h | number | h number)

@return (color)

Example

Related

CSS Specification [external]

Requires

@function lch()

Color Previews