Apply paints with 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.

Use the color picker

Use the color picker to apply the following paint properties and settings:

1. Create a custom color, or browse color styles and variables from your libraries.
   Learn more about applying colors from libraries.
2. Click to add a new color variable.
   Learn more about variables.
3. Choose from solid, gradient, image, or video fill type.
   Learn more about paint fill types.
4. Preview and apply a blend mode to the current layer.
   Learn more about blend modes.
5. Check color contrast for WCAG accessibility. Learn more about color contrast accessibility.
6. Use the color palette in the body of the modal to select a color.
7. Select any color from an image or layer in the canvas.
   Learn more about the eyedropper tool.
8. Adjust the hue using the slider below the palette. Click and drag left or right to adjust.
9. Adjust the opacity of the color using the second slider.
10. View and adjust the color notation across different color models. Use the dropdown menu to choose between RGB, HEX, CSS, HSL, or HSB. 
    Learn more about color models in Figma.
    

    Tip: To quickly adjust the values in RGB, HSL, or HSB fields, use your trackpad or mouse to scrub their values up or down. Hold down Option (Mac) or Alt (Windows), then click and drag your cursor to the left to decrease the value or to the right to increase it.

11. View and select colors and styles in the current file, or from libraries added to the file.

Check your design for accessibility

Proper color contrast makes your designs more inclusive by improving readability for users with visual impairments. The built-in color contrast tool helps you quickly identify when a color combination meets accessibility guidelines—and when it doesn’t—so you can make adjustments as needed.

What do contrast ratios mean?

Contrast ratios measure the difference between two colors, ensuring text and UI elements are readable for all users. Higher ratios provide better readability, especially for users with low vision.

The Web Content Accessibility Guidelines (WCAG) provide best practices for color contrast, readability, and navigation. Following these standards helps ensure your designs are inclusive, user-friendly, and compliant with legal requirements. WCAG guidelines require:

• 4.5:1 for normal text (AA compliance)
• 3:1 for large text and graphics (AA compliance)
• 7:1 for normal text (AAA compliance)

Check color contrast

1. Click to open the accessibility view in the color modal.
2. Review the contrast ratio between your foreground and background colors.

   

   Note: The color of your selected layer is always considered the foreground. The contrast ratio measures the luminance (brightness) difference between two colors. It ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).

3. Follow accessibility guidance to see if your colors meet WCAG level AA or AAA standards.
   • AA: essential accessibility for standard compliance
   • AAA: highest-level accessibility for enhanced compliance
   A next to AA or AAA indicates that your current values don’t meet accessibility standards and need to be adjusted.

   Tip: Click the indicator to auto-correct the value to its nearest compliant color.

   

4. Click to adjust color contrast accessibility settings. The following options are available:
   • Categories:
     • Auto (based on selected layer)
     • Large text
     • Normal text
     • Graphics
   • Compliance levels:
   • AA
   • AAA (available for text only)