Sample colors with the eyedropper tool

Before you Start

Who can use this feature

Available on all plans.

Anyone with can edit access to a design file can use the eyedropper tool.

Use the eyedropper tool to apply colors to layers by sampling colors from any layer, image, or background image of a page. You can even sample, apply, and create color variables and color styles using the eyedropper.

Toggle the eyedropper tool

There are a couple of ways to toggle the eyedropper tool depending on the property for which you want to update the color. 

Toggle eyedropper for color fill property

1. Select the layer you wish to edit.
2. Select the eyedropper tool by using the keyboard shortcut:
   • Mac: ⌃ ControlC or I
   • Windows: I

Toggle eyedropper for other properties

This method works for all properties containing color, such as stroke, shadow effects, and colors in a mixed selection.

1. Select layer you wish to edit.
2. In the right sidebar, find the property you wish to edit and click the color swatch to open the color picker.
3. From the color picker, click the Eyedropper icon or use the keyboard shortcut:
   • Mac: ⌃ Control C or I
   • Windows: I

Sample and apply a color

With the eyedropper tool toggled, you can sample and apply colors from any layer or background of the current page. You can also sample and apply color variables and color styles.

Raw color value

1. Select the layer you want to edit.
2. Toggle the eyedropper tool, then hover over a layer to view information about the color’s appearance, color, and value. If desired, you can switch between different color models.
3. Click on the color to apply it to the selected layer.

Color variable or style

You can use the eyedropper tool to sample a color variable or style and apply it to a selected layer.

1. Select the layer you want to edit.
2. Toggle the eyedropper tool, then hover over a pixel containing a color variable or color style.
3. While holding ⇧ Shift, click on the layer to apply the variable or style to the selected layer.

Switch between color models

While sampling a color with the eyedropper tool, you can press Tab on your keyboard to switch to view the color values in a different color model.

You can switch between Hex, RGB, HSL, and HSB. Learn more about color models.

Create a color variable or style

You can use the eyedropper tool to create a color variable or style from a sampled color.

1. Toggle the eyedropper tool.
2. Hold the following keyboard shortcut:
   • Mac: ⌘ Command ⇧ Shift
   • Windows: ⌃ Control ⇧ Shift
3. While holding the shortcut, press Enter or click on the color from which you wish to create a color variable or style. .
4. From the modal, use the tabs to choose whether to create a Style or Variable.
5. Fill out the fields and press Create. This will create the style or variable and apply it to the selected layer.

Copy a color to the clipboard

To copy the color values of a sampled pixel:

1. Deselect everything on the canvas by pressing Esc on your keyboard.
2. Toggle the eyedropper tool.
3. If desired, press Tab to switch to a different color model.
4. Click anywhere to copy the color information to your clipboard. If a color variable or color style is applied, you can hold ⇧ Shift to copy the variable or style name and color value.