Skip to main content

Choose a colour with the colour picker

Use the colour picker to select or fine-tune a hex colour value for things like branding, chart colours, or UI accents.

Audience

This guide is designed for project manager.

Steps​

Step 1: Open the colour picker​

Locate the colour field on the page and select the coloured swatch or input area to open the colour picker popover.

Open the colour picker

Step 2: Choose a colour from the palette​

Use the built-in browser colour palette (for example, by dragging within the colour area or adjusting sliders) until you see the shade you want, then release to apply it; the selected colour will appear in the swatch and update linked elements.

Choose a colour from the palette

Step 3: Enter a hex colour manually​

In the hex input field, type a valid hex code (for example,

Enter a hex colour manually

Step 4: Correct invalid hex values​

If you enter an invalid hex code, the field will indicate an error and the colour will not update until you correct the value to a valid 6-digit hex format starting with

Correct invalid hex values

Step 5: Close the colour picker​

Click outside the popover or press Escape to close the colour picker; your last valid selection remains applied to the associated element or setting.

Close the colour picker

Last updated: 2026-01-31