Updating base transforms #4303
Replies: 2 comments
-
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 soin 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)`
}
}
} Usagesome-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. |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
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
Beta Was this translation helpful? Give feedback.
All reactions