Before you start
Who can use this feature
Supported on any team or plan
You will need can edit access to the file to use the color picker.
The color picker allows you to apply paints to text layers, strokes and other vector objects.
Use the color picker to apply solid fills, gradients, or images. You can also control the hue, saturation, or opacity of a color, as well as apply blend modes.
Open the color picker
You'll need to apply a fill or stroke to a layer before you can access the color picker. Once applied, you can access the color picker in the right sidebar.
If all layers in your selection have the same fill or stroke color, you can view and update the color in the Fill or Stroke section.
If the layers in your selection have different colors applied, you can view and update colors from the Selection colors section.
In the right sidebar, you can view a swatch of the current color, the hexcode value, and the opacity. To open the color picker, click on the color swatch.
Tip! You can also type a CSS color directly in the field. See the list of CSS colors that are supported by all browsers on the w3 website: https://www.w3schools.com/cssref/css_colors.asp
Use the color picker
Once you've opened the color picker, you have access to any paint properties:
- Use the top-left menu to select a type of paint. Choose from a solid color, a gradient, an image or an animated GIF.
- Use the to preview and apply blend modes to layers →
- Use the color palette in the body of the modal to select a color:
- View the current color is shown in the white circle.
- Explore any related tints, tones, and shades.
- Click and drag the white circle to adjust the color.
- Click the to select the eyedropper tool. This allows you to select any color from an image or layer in the canvas.
- Adjust the hue using the slider below the palette. Click and drag left or right to adjust.
- Adjust the opacity of the color using the second slider.
- View the color notation across different color models. Use the menu to choose between RGB, HEX, CSS and HSB. Learn more about color models in Figma →
- Use the next to the Document color to select a palette. This allows you to select colors from local colors and styles, as well as styles from enabled libraries.
Access sliders when you select colors in the Color palette Use your mouse-wheel or trackpad to scroll along the hue slider. Hold down the modifier key while scrolling to set the opacity:
- MacOS: Option
- Windows: Alt
Use the eyedropper tool
The eyedropper tool allows you to select and sample colors from any object or image in a file. Use the eyedropper to identify colors and apply them to your layers.
- Select the object you'd like to edit.
- Use the i keyboard shortcut to open the eyedropper tool.
- 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:
Want to reuse colors across your designs? Save your colors, gradients, and images as Styles. Learn more about Learn how to create color styles →