Description

ColorPicker is a component that allows the user selecting a color from a given list or input a custom color using its HEX code.

Component composition

ColorPicker consists of the following:

• ColorPicker.Trigger
• ColorPicker.Popper
• ColorPicker.Colors: list of predefined colors
• PaletteManager (optional): container for user's custom colors, which includes:
  • PaletteManager.Colors: list of added colors
  • PaletteManager.InputColor: set of controls for adding new colors

Appearance

Trigger

The trigger for a ColorPicker is a Select with a circle as the leading addon, and has 16px * 16px size.

List of colors

The list of colors consists of color preview swatches that display all available color values.

Margins between the swatches must be multiples of 4. The default margin is 4px:

Color swatch types

Color swatches can have one of the two types of appearance:

Color types

Type	Appearance example	Usage
Background color		Use for changing the background color. For example, a user can pick colors to visually separate their competitors.
Text color		Use for changing the Tag color, for example

Dropdown

Width and height

The recommended width of the dropdown is 188px. The height of the dropdown depends on its content.

Showing all available colors in the dropdown is crucial. However, if there's more than 5 rows of colors, you should limit the height and display a scrollbar.

DropdownMenu appearance

Default dropdown	Dropdown with more than 5 rows of colors

Interaction

• In the hover state, trigger has a border: 1px solid var(--border-secondary).
• In the active state, trigger changes its border color to var(--border-info-active).

Default color

Color item states

Item type	Normal	Hover	Active	Usage
Background color				Use for changing the background color of other components.
Text color				Use for changing text and background colors of other components.
No background color				Use when no color is selected.
No text color				Use when no color is selected.

Custom color

Custom color item states

Item type	Normal	Hover	Active	Usage
Background color				Use for changing the background color of other components.
Text color				Use for changing the text and background colors of other components.

Adding colors

States of item for adding colors

Item type	Normal	Hover	Active	Usage
Add color button				A tertiary button with border-radius: 50%.

Custom colors (optional)

Users have the ability to add or remove custom colors, but they cannot modify default or existing custom colors.

TIP

We recommend that your product sync and save the user's custom palette in different parts of the interface.

Adding custom color

Users can add a color to the custom palette by entering the value into the input field and saving it by pressing Enter or clicking the Check button.

The input field only allows six characters, including numbers and letters from A to F. If the user enters fewer or more characters, or characters that cannot be converted to a 6-character HEX value, the input gets the invalid state.

To help users fix the invalid input, add the following message to the tooltip: "Please enter 6 latin letters and/or digits."

TIP

User can enter both upper-case and lower-case characters, but the input will save them as upper-case.

Removing custom color

Usage in UX/UI

Components that you can use as a trigger for the ColorPicker:

• Input
• Link component
• Select