Updating base transforms

[JaKeenan0922]

Proposal for improvement: Add oklch color space support to less and update transform functions to use oklch instead.

Why?

Less.js transform functions (fade, lighten, darken, etc.) utilize RGB and HSL color spaces when performing transformations. These color spaces are not perceptually uniform, meaning that the intended effect is not consistent across all colors. The OKLCH color space compensates for human perception and adjusts available colors accordingly. See the first link and scroll down to see visual examples.

What is oklch?

OKLCH is a perceptually uniform color space that supports P3 wide color gamut. The support for P3 is important because currently if an OKLCH color is given to less it would then be converted to HSL or RGB which will change the color beyond the intended effect.

Quick Reading

MDN Docs on OKLCH
In depth technical explanation of why oklch is better than alternatives

[JaKeenan0922]

While I do think that less should adopt transforms within the oklch colorspace instead of relying on RGB and HSL color spaces, for anyone wanting to use these transformation functions, feel free to use the below plugin code.

Here's what I came up with:

Create a plugin file like so

in myLessPlugins.js

// just a helper function to pull out the values passed in to a color variable. When given color=oklch(0.5 0.3 200) will return [0.5, 0.3, 200]
function getColorParams(color){
  if (color.value && color.value[0] == '#') {
    color.name = 'rgb';
    return color.rgb;
  }
  return color.args[0].value.map((p) => p.value);
}

function getColorDefinition(color) {
  const colorParams = getColorParams(color);
  const alphaChannel = colorParams.length == 4 ? `/ ${colorParams[3]}` : '';
  return `${color.name}(${colorParams[0]} ${colorParams[1]} ${colorParams[2]} ${alphaChannel})`; // important to mind the spaces to delimit params :~)
}

module.exports = {
  install: function (less, pluginManager, functions) {
    // increases the perceived lightness by a given amount
    functions.add('lighten', function(color, amount) {
      const okDefinition = getColorDefinition(color); // in this case, this would be the color provided when using the function i.e. lighten(@oceanBlue, 0.3)
      return `oklch(from ${okDefinition} calc(l + ${amount.value}) c h)`;
    }
    // reduces the perceived lightness by a given amount
    functions.add('darken', function(color, amount) {
      const okDefinition = getColorDefinition(color);
      return `oklch(from ${okDefinition} calc(l - ${amount.value}) c h)`;
    }
    
    functions.add('setAlpha', function(color, amount) {
      const okDefinition = getColorDefinition(color);
      return `oklch(from ${okDefinition} l c h / ${amount.value})`;
    }
    
    // this function increases the chroma by the specified amount (makes colors more vibrant)
    functions.add('saturate', function(color, amount) {
      const okDefinition = getColorDefinition(color);
      return `oklch(from ${okDefinition} l calc(c + ${amount}) h)`
    }
    
    // this function reduces the chroma by the specified amount (makes colors more grey and sad)
    functions.add('desaturate', function(color, amount) {
      const okDefinition = getColorDefinition(color);
      return `oklch(from ${okDefinition} l calc(c - ${amount}) h)`
    }
  }
}

Usage

some-less-file.less

@plugin './path/to/myLessPlugins.js';

@royalBlue: oklch(0.35 0.25 219);

.foo{
  &__bar{
    background-color: lighten(@royalBlue, 0.25); // results in oklch(0.60 0.25 219);
    // background-color: darken(@royalBlue, 0.05); // results in oklch(0.30 0.25 219);
    // background-color: setAlpha(@royalBlue, 0.5); // results in oklch(0.35 0.25 219 / 0.5); (50% opacity)
    // background-color: saturate(@royalBlue, 0.05); // results in oklch(0.35 0.30 219);
    // background-color: desaturate(@royalBlue, 0.1); // results in oklch(0.35 0.15 219);
  }
}

Also see https://jeronimoek.github.io/color-translate-web/ and associate VSCode Plugin if you want to see this color space in action.

[puckowski]

oklch considered Baseline 2023 per https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch with around 93.15% support by global users according to https://caniuse.com/?search=oklch

[JaKeenan0922]

Thank you for providing that information. I'm curious about your perspective as a maintainer; is there a particular Baseline year or global support percentage which makes a proposal safe / ready to implement?

[puckowski]

Using oklch for transformations would be easier to consider if oklch were general "Baseline". A general definition of Baseline means the feature has broad browser support for at least 2.5 years (see: https://web-platform-dx.github.io/web-features/). Looks like oklch went baseline around March 2023, so around 22 months ago (short of 30).

While the quick support analysis suggests oklch support may be a little lacking, my gut says it will take some time to implement the changes necessary for transformations. Work can begin and by the time the PR is merged oklch will be closer to general Baseline.

That said, I have some items in my queue that I plan on working on ahead of this, so personally I have no immediate plans to begin development work on this proposal. If that changes I will update this discussion.

[puckowski]

Haven't forgotten about this suggestion, but also haven't started work on it.

Angular recently refrained from using oklch for Angular DevTools due to lack of wide baseline availability which is the reason why I hesitate here.

Reference: angular/angular#60374 (comment)