Color Modifiers (pro)

Color Modifiers allow you to easily create consistent, scalable color systems by adjusting and blending colors with fine-grained control within your design tokens.

Modifying your Color Tokens is a powerful way to create dynamic color schemes. For example:

• Generate a color ramp from a single 'base color'.
• Introduce subtle variations between interactive states.

→ Read the Color Token guide for more details

How to use color modifiers#

In the Color Token form, define your Token Name and assign the Token Value by referencing another Color Token.

• This becomes the 'base color' referred to in the rest of this guide.

Select the Add new modifier button on the right side of the Modify label.

• Choose your desired color space:
  • LCH
  • SRGB
  • P3
  • HSL
• Choose your desired modifier.
• Define the modification amount by entering in a number between 0 and 1 based on your desired effect (details below).
• Be sure to Save your new modified Color Token

Modify colors with the Color Picker tool#

You can also use the Color Modifier (pro feature) with the Color Picker tool in the plugin by Selecting the color swatch to the left of the Token Value Input.

Available modifiers#

The plugin currently supports these color modifiers:

Lighten#

The lighten modifier increased the lightness (luminosity) of the base color by defining a numeric value that represents a percentage of adjustment.

• 0 = no change in lightness (0%)
• 0.5 = 50% increased lightness
• 1 = 100% increased lightness,
  • which significantly increases the lightness but does not necessarily make the color white.
  • The maximum lightness is usually capped to maintain the integrity of the color's hue and saturation.

Darken#

The darken modifier reduces the lightness (luminosity) of the base color by defining a numeric value that represents a percentage of adjustments.

• 0 = no change in lightness (0%)
• 0.5 = 50% reduced lightness
• 1 = 100% reduced lightness,
  • which significantly darkens the color, but does not necessarily make the color black.
  • The maximum darkness is usually capped to maintain the integrity of the color's hue and saturation.

Alpha#

The alpha modifier adjusts the opacity of the base color by defining a numeric value that represents a percentage of adjustment for fine-grained control of transparency.

• 0 = fully transparent (0%), making the color invisible
• 0.5 = 50% opacity, making the color semi-transparent
• 1 = full opacity (100%), the color appears 'solid'

Mix#

The mix modifier combines the base color with another color token by defining a numeric value that represents the proportion of the mix for fine-grained control over the balance between the two colors.

• 0 = only the base color (0% of the mixed color)
• 0.5 = an equal mix of both colors (50% base color, 50% mixed color)
• 1 = only the mixed color (100% of the mixed color)

Limitations of modified colors#

There are some known limitations with Modified Color Tokens.

Exporting to Figma as Variables looses references#

Figma Variables does not support Modified Colors, as they aren't able to resolve the value of these sorts of 'dynamic references'.

So the plugin will Export your Modified Color Tokens as Color Variables which will show their Resolved Values in hex codes, which Figma can support. Changes you make to these Tokens in the plugin will also update to the connected Variable when you Export your changes.

→ Read the Export to Figma Overview guide for more details.

W3C DTCG Token Format#

Color is an official token type in the W3C DTCG specifications (8.1 Color) which is currently being updated to define expanded support for additional color spaces.

→ We'd love to hear your thoughts on this! Join the conversation on Featurebase.

Today, we have to resolve your Modified Colors into Hex when Exporting to Figma, and to align with the current definition of Color Tokens in the W3C DTCG specification.

Transforming Tokens#

Engineers typically transform Tokens used in code with Style Dictionary, which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: @Tokens-studio/sd-transforms, an npm package that prepares Tokens for Style Dictionary.

When transforming Color Tokens that have been modified, there are specific configurations to be aware of.

SD-Transforms generic package includes a specific transform to convert Tokens Studio modified colors to their resolved color values.

→ SD-Transforms Read-Me doc, ts/color/modifiers

You can add an optional transform to convert Tokens Studio modified colors to a specific format, for example e.g. hsl which will ensure that the resolved color value will be formatted as the resolved value in HSL.

There's also a global option which allows you to set the color format once for all colors that have a modifier, so you don't have to set this for every token individually.

→ SD-Transforms Read-Me doc, options

Resources#

Mentioned in this doc:

• SD-Transforms - Read Me
• Style Dictionary - https://styledictionary.com/
• Design Tokens Community Group - W3C Draft
• Design Tokens Community Group - 8.1 Color

Tokens Studio uses the ColorJS.io library for the implementation of modified colors.

• https://colorjs.io/docs/

Figma resources:

• Design in Figma - Manage color profiles in Figma

CSS resources:

• MDN Web Docs - Color Space Glossary
• MDN Web Docs - Color Gamut

Community resources:

• A written guide by Katie Cooper(www.katiecooper.co), Lead Product Designer - Creating a color ramp using color modifiers in Tokens Studio

💡 Something to share? Submit it here!

Known issues and bugs#

Tokens Studio Plugin GitHub - Open issues for Token Type Color Modifiers

• Color Transforms #2946
  • HSLA calculated color values are incorrect
• HSLA #2945
  • Choosing HSLA in the color picker converts the Token to RGBA
• Color modifiers break when borderRadius Token is renamed #2668
  • Unexpected results when renaming borderRadius Tokens

🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our community Slack, or submit it on our feedback tool.

Requests, roadmap and changelog#

• Modified colors aren't showing up in the second screen feature as expected - Community Post

💌 Visit https://feedback.tokens.studio/ to contribute or subscribe to updates.