Blend 0.2.3

Relative Colors

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

Related

CSS Colors Level 5 [external]

@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: #574665;
  shorthand: #574665;
}

@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: #005278;
  shorthand: #005278;
}

@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: #e3c0ff;
  shorthand: #e3c0ff;
}

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: #574665;
  adjust: #005278;
  scale: #c388f8;
  multiply: #bf85f4;
}

Related

CSS Specification [external]

Requires

@function lch()

Color Previews

rebeccapurple #663399 rgb(102, 51, 153) hsl(270, 50%, 40%)
set chroma 20 #574665 rgb(87, 70, 101) hsl(273, 18%, 34%)
adjust hue -60 #005278 rgb(0, 82, 120) hsl(199, 100%, 24%)
scale lightness 50% #c388f8 rgb(195, 136, 248) hsl(272, 89%, 75%)
multiply lightness * 2 #bf85f4 rgb(191, 133, 244) hsl(271, 83%, 74%)