'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Color models in Figma Design
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 affect how Figma renders colors. You can choose between sRGB or Display P3 as your default color profile, as a design file's color profile, or for exporting assets. Learn about color profiles and color management →
Color models
By default, Figma represents color values using the Hex model. You can also view color notation for other models in the color picker.
Hex
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 hex codes.
Hex values have 8 characters and use the following syntax:
#RRGGBBAA
- The RR represents the red component.
- The GG represents the green component.
- The BB represents the blue component.
- The AA represents the alpha component. An alpha value of 00 represents a fully transparent color, and an alpha value of FF represents a fully opaque color.
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.
RGB values are in the following syntax:
(red, green, blue, alpha)
- Red, green, and blue values define the intensity of the color with an integer between 0 and 255
- The alpha value defines the opacity as a number between 0.0 (fully transparent) and 1.0 (fully opaque)
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).
HSB values are in the following syntax:
(hue, saturation, brightness, alpha)
- The hue value is measured in degrees, and is represented with an integer from 0 and 360
- The saturation value is represented with an integer from 0 to 100, with 100 being the most saturated
- The brightness value is represented with an integer from 0 to 100, with 100 being the brightest
- The alpha value defines the opacity as a number between 0.0 (fully transparent) and 1.0 (fully opaque)
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.
HSL values are in the following syntax:
(hue, saturation, luminance, alpha)
- The hue value is measured in degrees, and is represented with an integer from 0 and 360
- The saturation value is represented with an integer from 0 to 100, with 100 being the most saturated
- The luminance value is represented with an integer from 1 to 100, with 100 being the lightest
- The alpha value defines the opacity as a number between 0.0 (fully transparent) and 1.0 (fully opaque)
CSS
The CSS color model allows you to view or enter RGBa values using CSS syntax.
CSS values are in the following syntax:
rgba(red, green, blue, alpha)
- Red, green, and blue values define the intensity of the color with an integer between 0 and 255
- The alpha value defines the opacity as a number between 0.0 (fully transparent) and 1.0 (fully opaque)
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 and adjust color model values
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 dropdown to switch color models. Choose between Hex, HSB, HSL, CSS and RGB:
Figma will shows values in the notation you selected.
You can also adjust color by inputting the values directly in the available fields.
- RGB, HSL, and HSB color models have a separate percentage field for alpha values
- The CSS model must include an alpha value as a number between 0.0 and 1.0
- For Hex, you can either:
- Input a 6-digit hex code and use the separate percentage field for adjusting the alpha value
- Input an 8-digit hex code that includes the alpha value as the last two digits