Color profiles define how colors are reflected on a digital display. In Figma, color profiles affect how color values are represented in the Color picker.
Regardless of your color profile (or color space) preferences, Figma exports all assets using the sRGB color space.
Want to adjust your Color space in Figma ? Learn more about using Figma in a different color space in our Manage color space in the Desktop app article.
Color profiles in Figma
There are five color profiles available in Figma:
By default, we show color values using the HEX color profile.
Is the default color profile in Figma and refers to the Hexadecimal color. This is an alphanumeric shorthand representative of the RGB values.
“Hexcodes” are commonly used by designers and developers in web, or digital design.
RGB or Red Green Blue is the most commonly used color profile.
Every color that is rendered on a monitor or screen will be made up of varying amounts of Red Green and Blue.
Heard of RGBa? The a in RGBa stands for the alpha channel, which represents the Opacity of the color (from 100% to 0%).
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 profiles will have an additional Alpha channel (or value), which represents the Opacity of the color. This ranges from 100% - 0%.
Hue Saturation Luminance is another color space that is modelled 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.
The CSS color profile 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 handoff colors to a web developer? The CSS color profile will give you a CSS friendly format of the currently selected color. Copy and paste this directly into a stylesheet, formatting included. Learn more about Developer Handoff.
View Color profiles in the Color Picker
While Figma exports everything in the sRGB color pofile, you may want to view colors in another color profile.
View and update colors across different color profiles in the Color picker.
Click on the Fill or Stroke in the Properties Panel to open the Color picker.
Below the Hue and Opacity sliders you can see the current color profile and the corresponding values.
Use the drop down to switch color profiles. Choose between HEX, HSB, HSL, CSS and RGB:
Figma will update the values so they match the color profile you selected.