Using the Color Picker
You can find all tools related to Color in the Properties Panel. The Color menu will only be shown once a relevant layer or object is selected.
Once opened, the Color Picker will allow you to view, select, and sample colors in your designs.
In this article, we'll cover how to:
Using the Color Picker
- Select a layer or object(s) in the canvas.
- In the Properties Panel, click the color sample next to the property to open the Color Picker.
This applies to Fill, Stroke, and Background properties.
Check out the following diagram for a full tour of the Color Picker:
- In the top-left corner, you can determine if you would like a Solid color, a Gradient (Linear, Radial, Angular or Diamond), or if you would like to use an Image as a Fill instead.
- On the top-right corner, you can click the Droplet icon to choose the Blending mode. Learn more about Blending Modes.
- You then have the main Color Picker, which shows you the current color of the selected object - indicated by the white circle - surrounded by any related tints, tones and shades. Click and drag on the white circle to adjust the color.
- On the left-hand side, the Eyedropper tool allows you to select any color from an image or object in the canvas (Learn more below).
- The top slider allows you to adjust the color's Hue - click and drag (left or right) to adjust.
Tip! You can also use your mouse-wheel or trackpad to scroll along the slider.
- The bottom slider allows you to adjust the selected color's Opacity.
Tip! You can hold down the [Alt] (Windows) or [Option] (Mac) key while scrolling to set the Opacity.
- Below the sliders you will see a few different values. This details the selected color's specific values, across a variety of color profiles. Click the drop down next to the value to switch between RGB, HEX, CSS and HSB.
Interpreting Color Profiles
- HEX: 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.CSS will give you the CSS friendly format of the currently selected color. You can then copy and paste this directly into a stylesheet, formatting included.
- 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. You may have also heard of RGBa. The A in RGBa stands for the Alpha channel, which represents the Opacity of the color (from 100% to 0%).
- 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 profiles will have an additional Alpha channel (or value), which represents the Opacity of the color. This ranges from 100% - 0%.
- HSL: 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.
- CSS: Allows you to enter RGBa values using CSS syntax
Using the Eyedropper Tool
The eyedropper tool allows you to select and sample colors from any object or image in a file.
This allows you to quickly identify colors, apply them to selected objects and save sampled colors to your Color Styles.
- Select the object you'd like to edit.
- In the properties panel, find the property you'd like to update (e.g. Fill, Stroke, or Effect).
- Click the swatch or dial to the left of the property value to open the Color Picker:
- Click the eyedropper tool icon next to the slider, or use the keyboard shortcuts the [Ctrl] + [C] or [i].
Tip! If you want to change the Fill of a selected object, you can use the shortcuts above to quickly enable the eyedropper, directly from the canvas.
- Use the eyedropper to hover over the color in the canvas you'd like to sample. The magnifier window will show you both the color and hex code of the sampled pixel:
- Click to apply the sampled color to the selected object:
Saving Colors and Styles
Figma will automatically save any colors sampled, along with any other colors used in the file, to the Document Colors. Document Colors are available wherever you can access the Color Picker.
If you are using a specific color across multiple objects in a file or project, you may want to add this color to your Team Library as a Color Style. This ensures that any changes you make to the underlying Style are automatically applied to any objects using that Style.
It's not possible to remove colors from your Document Colors palette.