Update fills using the color picker

The color picker allows you to configure an object's layer or stroke fill. Use the color picker to apply solid fills, gradients, patterns, images, and videos. You can also control the hue, saturation, or opacity of a fill, 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 open the color picker by clicking on the fill swatch in the right sidebar. The location of the fill swatch varies depending on the layers you have selected.

If all layers in your selection have the same fill or stroke, you can open the color picker by clicking on the swatch in the Fill or Stroke section of the right sidebar.

If the layers in your selection have different fills, you can open the color picker by clicking on one of the fill swatches in the Selection colors section of the right sidebar. Learn more about selection colors.

Use the color picker

You can use the color picker to manage the following fill properties:

1. Choose a custom color, or browse color styles and variables from your libraries. Learn more about applying colors from libraries.
2. Click the plus to add a new color style or variable.
3. Choose a fill type. Learn more about the different types of fills.
4. Click Blend mode to preview or apply a blend mode.
5. Click Check color contrast to check color contrast for WCAG accessibility. Learn more about checking designs for accessibility.
6. Use the color palette to select a color.
7. Use the eyedropper tool to select a color from another layer on the canvas.
8. Use the slider to adjust the hue.
9. Use the slider to adjust the opacity.
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.
11. View and select colors 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)