Color models in Figma
Before you start
Who can use this feature
Colors are available on any team or plan
Anyone with can edit access to the file can use the color picker and select a color model.
There are lots of terms used to describe color. In this article, we use the term color model to describe the different ways your can represent a color.
Figma allows you to see colors across five color models: HEX, HSB, HSL, CSS, and RGB.
Switching between color models only affects how Figma describes colors, it doesn't affect how Figma renders them.
Color profiles do affect how Figma renders colors. If you are using the Figma Desktop app, you can choose to apply a different color profile to your working space.
Regardless of your desired color profile, Figma exports all assets using the sRGB color profile. Learn about color management in the Desktop app.
Color models in Figma
By default, Figma represents color values using the HEX model. You can also view color notation for other models in the color picker.
HEX
Is the default color model in Figma and refers to the Hexadecimal color. This is an alphanumeric shorthand representative of the RGB values.
Creators in web, or digital design refer to the notation for this color model as hexcodes.
RGB
RGB or Red Green Blue is the most commonly used color model.
Every color that is rendered on a monitor or screen will be made up of varying amounts of Red Green and Blue.
You may have also seen RGBa referenced in other resources. The a in RGBa stands for alpha, which represents the opacity of the color. This represents opacity as a value between 0 and 100%.
HSB
Hue Saturation Brightness is an alternative representation of the RGB model.
This is based around how the human eye perceives color, versus how a display would (in RGB).
All color models will have an additional Alpha channel (or value), which represents the Opacity of the color.This represents opacity as a value between 0 and 100%.
HSL
Hue Saturation Luminance is another color model based around how the human eye perceives color.
Like HSB, it is an alternative representation of the RGB model. The main difference between HSB and HSL is how saturation and lightness are treated.
CSS
The CSS color model allows you to view or enter RGBa values using CSS syntax. This includes the format, followed by the values for each color: rgba(47, 128, 237, 1)
Want to communicate colors to a developer or engineer? The CSS model lets you copy CSS-friendly notation for the selected color. This lets you paste this directly into a stylesheet, formatting included. Learn more about Developer Handoff.
View Color models in the Color Picker
While Figma exports everything in the sRGB color model, you may want to view colors in another color model.
View and update colors across different color models in the Color picker.
- Click on the Fill or Stroke in the right sidebar to open the Color picker.
- Below the Hue and Opacity sliders you can see the current color model and the corresponding values.
- Use the drop down to switch color models. Choose between HEX, HSB, HSL, CSS and RGB:
- Figma will show the values in the notation you selected.