Math for colors

[SimonLeclercq]

Hello there,
First of all, thank you for the excellent work on the topic!

Within the framework of the generation of automated theme from a pallet, would it be possible to manage math directly since the creation of the .color, by attacking the values H, S, L, A of an alias directly?
I could for example reduce the opacity of an alias to manage the cases of transparency, or play on the light to manage the state colors.

in a utility mindset, we could imagine details on the Hue, Saturation and Light, and then increment or decrement them.

as a picture may be worth 1,000 words, find bellow what I would be able to do:

In the same way, It could be useful to be able to modify opacity (A) for any color.
Have a good day

[lauthieb]

Would definitely need this! Thanks 🙏

[EloB]

Material UI React library has some good util functions for color manipulation.

This one for instance is really useful.
https://github.com/mui/material-ui/blob/119c8815615ce463047deeb58406b6b5dedd2414/packages/mui-system/src/colorManipulator.js#L293

/**
 * Darken or lighten a color, depending on its luminance.
 * Light colors are darkened, dark colors are lightened.
 * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
 * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
 * @returns {string} A CSS color string. Hex input values are returned as rgb
 */
export function emphasize(color, coefficient = 0.15) {
  return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
}

[EloB]

@six7 If you plan to implement color manpulation in Figma token then you might find this interesting :)

[six7]

This is great! We're currently planning on using chroma.js as it allows us to do all manipulations we were planning to achieve. I haven't considered an emphasize modifier, but that seems very useful - especially as you wouldn't have to change modifiers between light or dark themes.

I'll create a tracking issue soon where I'd love all your feedback.

[six7]

Captured our plan for this in #1166 - would love your feedback on it!

[SimonLeclercq]

What a good news, let's keep in touch 👍

[EloB]

This one looked pretty cool as well https://github.com/omgovich/colord#benchmarks