Last updated
Was this helpful?
Last updated
Was this helpful?
Color Tokens define solid, reduced transparency, or gradient colors in a color space of your choice.
Color Tokens define the visibility and emphasis of design elements, ensuring we can read text easily, see the difference between objects in the background and foreground, and help us identify what we should pay attention to.
Many of the properties supported by this token are individually defined in CSS.
Color Tokens can be used to define these design properties:
Fill color
Border color
Shadow color
Depending on how you define the Value of your Color Tokens you can achieve:
Solid color
Values written with full opacity
For example, a Hex color that is black #000000
Reduced opacity
Values written with reduced opacity
For example, an RGBA color that is black at 10% opacity rgba(0,0,0,0.1)
Gradients
Multiple color values with their position, direction, and angle defined
Modified colors (pro feature)
Adjusting the value of a base color using a specific operation, like lighten or darken.
Using the plugin for Figma, you can define your Color Tokens in the following color spaces:
Solid colors
Hex: #ff0000
RGB: rgb(255, 0, 0)
Reduced opacity with alpha values
RGBA: rgba(255, 0, 0, 1)
ARGB: #80FFFF00 (also known as Hex8)
HSLA: `hsla(120, 50%, 50%, 1)
Modified colors - Pro feature
LCH
SRGB
P3
HSL
When trying to reference another Token as the Value for a Color Token, you will see Tokens in the dropdown list that are:
Living in Token Sets that are currently active.
In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
The same = color
After you've created Color Tokens, they can be referenced in another Color Token and composite Tokens with a color property defined:
Like all tokens in the plugin, you can Create a Color Token by opening its Create New Token form and defining the Token Name and Value.
However, Color Tokens can also be created using a Color Picker, accessible by selecting the color swatch to the left of the Token Value Input.
Defining the Value of your Color Token as RGBA, HSLA or ARGB allows you to use the alpha value built into these color spaces.
The alpha modifier adjusts the opacity of the color.
In RGBA and HSLA the alpha value is defined as 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 = fully opaque (100%)
For example, if you want a Color Token that is black with a 25% opacity you would write the value of the token to be:
or
The ARGB format is sometimes called "Hex 8" by developers because it uses 8 hexadecimal digits: the first two digits represent the alpha (opacity) channel, and the next six digits represent the RGB color channels.
If we were to write the same Color Token that is black with a 25% opacity in ARGB it's value would be:
You can reference an existing Token as a part of an RGBA or HSLA Token Value to create a reduced opacity version of that Token.
For example:
Creates a new token which references the grey.900 Color Token with only 6% opacity.
It's also possible to write your RGBA or HSLA Token Value by referencing a Color Token and a unitless Number Token in the value.
For example, a Number Token called brand.opacity.border.default with a value of 0.06 would be added to the example above:
Ensure you are using a unitless Number Token!
The Opacity Token Type in the plugin is intended for layer visibility in Figma only, not for use in Color Tokens as a modifier.
The opacity can be defined in the color picker by:
Typing the alpha value between 0 and 1 in the last input.
Adjusting the second slider which controls the alpha value.
Select a card below to jump to its guide.
A Color Token defines the color styling of text, polygonal shape, frames, groups or graphic elements in Figma when the Token is applied.
You can apply the Token to fill the element with its value, or change its stroke color.
With one or more elements selected in Figma, right-click on the name of your chosen Color Token in the Plugin to see the it's options. Select your desired design property by clicking on it to apply the Token.
The Color Token has a special feature on the Tokens Page of the plugin, which allows you to toggle between a list or grid view.
This can be especially helpful if you need to see your Token Names while working in the plugin.
Color Tokens can be Exported to Figma as Color Styles. Tokens Studio also supports Styles with Variable References.
Here are some tips for creating Color Styles with Variable References using the Plugin.
When you Export to Figma as Color Styles, select these Options from the menu to create Color Styles with Variable References:
The option for Color styles is selected.
The option for Create styles with variable references is selected.
Themes and token sets where the referenced Tokens are located are active.
Themes and token sets where the variables are attached may need to be configured as reference only.
When transforming Color Tokens with gradient values, there are specific configurations to be aware of.
The SD-Transforms generic package will convert color token values with Figma's "hex code RGBA" into actual rgba() format for CSS.
Mentioned in this doc:
When the value of a Color Token with reduced opacity includes a reference to another Color Token which has reduced opacity, the resolved value is incorrect.
This doesn't quite match the , which focuses on the foreground color of text elements specifically.
This is based on restrictions of the for Color Tokens.
If you prefer a visual way to create reduced opacity Color Tokens you can open the color picker tool in the plugin .
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 -
Design in Figma -
MDN Web Docs -
Nate Baldwin's + Adobe -
Tokens Studio Plugin GitHub -
Referencing a (base+opacity) and adding another opacity to that, doesn't give the correct result
Expanded support for color spaces -
JSON Enhancements for color tokens and theming -
However, like all Token Types, you can "force" a reference by manually entering the Token Name between curly brackets.
For example {token.name.here}
Jump to the guide on Token Values with References by selecting the card below to learn more.
The plugin currently supports Linear Gradient Colors within a Color Token by writing the value to .
Once a Token has been applied, it will remain attached until you manually remove it.
Select the Token Type card below to jump to its guide.
Jump to the guide on Exporting Tokens to Figma by selecting the card below to learn more.
💡 Something to share?
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.
🐞 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
💌 Visit to contribute or subscribe to updates.
