Skip to main content

Colour Picker

Select a color from a predefined theme palette or choose a custom color manually.

There are two modes of picking a colour: Custom and Theme. Users can simultaneously apply both modes, switch between them, or choose to display only one mode.

Behavior​

Colour input​

  • Selecting the Colour Input triggers the Colour Picker popover.

  • A colour's value is displayed in two formats : Hex and RGBA.

Theme Mode​

  • Theme mode represents all the colours of an active theme.

  • By default, the colour picker uses the theme data available on the page. If the theme data includes custom colour palettes, that data must be passed to the component via the "themeColours" property.

  • Selected colours are indicated with a checkmark. A colour of the checkmark depends on the selected colour's contrast ratio: If the contrast ratio is lower than 3:1, the checkmark must use Grey/900, if the contrast ratio is higher than 3:1, the checkmark must use Grey/000.

Custom Mode​

  • Custom mode allows for picking a custom colour.
  • A colour can be displayed in two formats: Hex and RGB.
  • “Saved colours” display the colours added by users.
  • Selecting the "+” icon will save an active colour.
  • To delete a saved colour, the user right-clicks on the colour's swatch trigger a context menu with a delete action.
  • Saved colours can be displayed in a maximum of 3 rows.

Usage​

The Colour Picker component allows users to select and customize colors for various elements, such as backgrounds, text, and icons within an application. Users can choose precise colors from a predefined palette, adjust them using the color area and sliders, or enter specific color codes for exact matches.