Last updated
Was this helpful?
Last updated
Was this helpful?
Color Modifiers allow you to easily create consistent, scalable color systems by adjusting and blending colors with fine-grained control within Tokens Studio.
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.
In the Color Token form, define your Token Name and assign the Token Value by referencing another Color Token.
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.
Be sure to Save your new modified Color Token
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.
The plugin currently supports four popular types of modifications to Color Tokens.
Increases the lightness (luminosity) of the base color by your chosen value.
Reduces the lightness (luminosity) of the base color by your chosen value.
Adjusts the opacity of the base color by your chosen value, often reducing it to make the color more transparent.
Combines your base color with another color, allowing you to control the proportion of each color in the mix.
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.
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.
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'
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)
There are some known limitations with Modified Color Tokens.
Figma Variables does not support Modified Colors, as they aren't able to resolve the value of these sorts of 'dynamic references'.
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.
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.
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.
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.
Tokens Studio uses the ColorJS.io library for the implementation of modified colors.
Mentioned in this doc:
HSLA calculated color values are incorrect
Choosing HSLA in the color picker converts the Token to RGBA
Unexpected results when renaming borderRadius Tokens
Color is an official token type in the W3C DTCG specifications () which is currently being updated to define expanded support for additional color spaces.
→
SD-Transforms -
Style Dictionary -
Design Tokens Community Group -
Design Tokens Community Group -
Design in Figma -
MDN Web Docs -
MDN Web Docs -
A written guide by Katie Cooper, Lead Product Designer -
Tokens Studio Plugin GitHub -
Color Transforms
HSLA
Color modifiers break when borderRadius Token is renamed
Modified colors aren't showing up in the second screen feature as expected -
Jump to the guide on Exporting Tokens to Figma by selecting the card below to learn more.
🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our , , or send us an email support@tokens.studio
💡 Something to share?
💌 Visit to contribute or subscribe to updates.
Engineers typically transform Tokens used in code with , which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: , an npm package that prepares Tokens for Style Dictionary.
