Feedback on color modifiers

[six7]

👋 Hey everyone!

We've recently launched Color modifiers and we'd love your input! I'll use this discussion to collect any feedback we encounter to provide information about next steps.

[six7]

Add hue & saturation modifiers

Mentioned in #1647

Our style guide has a design rule that hovering interactions should adjust colours to bring the users attention to the component they are interacting with. Often this requires our colours to increase saturation to lift the brightness of the colour, but without washing it out (lighten alone).
In some cases, such as colours like yellow, using darken (adding black) alone leads to the colour becoming a "dirty yellow/brown" colour. Currently we solve this manually and shift the hue value towards the red spectrum which makes allows us to darken the colour and make it more orange than brown.
In both cases, lightness and darkness controls alone cannot resolve the desired visual outcome
When editing a colour token, and using a modifier, include the ability to change the hue and saturation values of the colour as well as the existing options
As the Hue, Saturation and lighten/darken need to be used together to achieve full colour control, it might be necessary to think about being able to apply multiple modifiers

[six7]

Allow negative values in amount

From Slack:

a color modifier mode like “lighten/darken” would be super awesome if negative values would darken and positive ones would lighten. it somehow does something, but i end up with unexpected results. the advantage of it would be so that I could simply create a global-modifier-tokens for border/hover/pressed states and then lighten or darken depending on the tokens positive or negative value.

[mikejyoung]

It would be great to see Google's new HCT system implemented as a modifier:
https://material.io/blog/science-of-color-design

In our product, we need to be able to generate palettes from user entered colors. We wanted to achieve a logic as close to as demonstrated here as possible: https://accessiblepalette.com. We also wanted to mirror the HCT structure of 0 being absolutely no light (i.e. black) and 100 being absolute light (i.e. white).

We found a nice solution Token Studio, using the lighten / darken color modifiers in the "SRGB" space. While "LCH" provided better ranges, we found it shifted colors too much. For example, blues became to purpley. This would not be acceptable by our customers, who want all colors in the UI to match their brand color closely.

We made "50" our source color, and lightened / darkened using these scales:

"tone-amount": { "0": { "value": "1", "type": "other" }, "10": { "value": "0.8", "type": "other" }, "20": { "value": "0.6", "type": "other" }, "25": { "value": "0.5", "type": "other" }, "30": { "value": "0.4", "type": "other" }, "35": { "value": "0.3", "type": "other" }, "40": { "value": "0.2", "type": "other" }, "50": { "value": "0", "type": "other" }, "60": { "value": "0.2", "type": "other" }, "70": { "value": "0.4", "type": "other" }, "80": { "value": "0.6", "type": "other" }, "90": { "value": "0.8", "type": "other" }, "95": { "value": "0.9", "type": "other" }, "98": { "value": "0.96", "type": "other" }, "99": { "value": "0.98", "type": "other" }, "100": { "value": "1", "type": "other" }

We're happy with this result, as its working well with a lot of different source colors. However, they are not as good as the palettes created using HCT, which produces nicer, more accurate ranges without shifting color spaces too much.

See this example:

Consequently, we'd love to see HCT as a color modifier option.

There are a couple of considerations if implementing:

• Using HCT, colors are generated by entering a "light" amount and the source color is never output as one of the levels (although "40" is very close)
• I would expect this will work different to the lighten/darken and probably need their own method (maybe something like this)
• HCT can also generate other colors from the source color, such as neutral colors (see here)

[denis-strong]

Idk if this a bug, or expected, but when renaming tokens, modifiers values are not updated.