Do

Use the color picker:

• To let users select any color freely.

Don't

Don’t use the color picker:

• If you want to let users select one color from a predefined set of colors. Use the color palette instead.
• If you want to let users select one color from a predefined set of colors, with the additional option of defining their own colors. Use the color palette popover instead.

1. Color Picker Container: Sets up lightness and saturation.
2. Sliders:
   2a) Modifies the hue
   2b) Modifies the transparency (“alpha channel”)
3. Comparison Color Fields: Display the current and new color settings.
4. Hex Input: Sets the color as a hexadecimal value.
5. Color Mode Panel: C onsists of HSL(A) / RGB(A) Inputs
6. Color Mode Switching Button

Anatomy of the color picker

The default color picker offers full color customization, including support for transparency (alpha channel). It provides two sets of input controls:

• Red / Green / Blue / Alpha (RGBA)
• Hue / Saturation / Lightness / Alpha (HSLA)

Users can switch between the RGBA and HSLA input modes, depending on their preference or the requirements of the task. This version of the color picker is suitable for advanced use cases, where precise color and transparency control is needed.

Default color picker

The simplified color picker provides controls for adjusting hue, saturation, and lightness. Unlike the default color picker, it doesn’t include an alpha (transparency), RGB or HSL setting.

The simplified color picker displays both the current color and the newly selected color, allowing the user to easily compare changes. This component is intended for use cases where a more focused and minimal color selection is needed, without the complexity of full RGBA or hexadecimal input options.

Simplified color picker

The color picker box enables users to select a color by moving the color picking circle within the box. Moving the circle vertically adjusts the hue or saturation, while horizontal movement changes the brightness or lightness.

This interaction allows for precise control over the selected color by navigating through a continuous gradient of shades and tones.

Picking a color in the color picker box

The hue slider enables users to select a base color by dragging the handle horizontally across the full color spectrum.

The transparency slider adjusts the opacity level of the selected color, where movement from left to right typically increases opacity.

Setting a hue and transparency in the color picker

Colors can also be selected by entering values directly into the HSL(A), RGB(A), or Hex input fields. If a user enters a value outside the valid range, it is automatically adjusted to the nearest allowed value. For example, values above 255 in RGB inputs are set to 255, and values above 360 in the hue (H) input are set to 360. Negative values are adjusted to 0.

Picking a color with the HSL(A) / RGB(A) Inputs

The color picker allows users to switch between RGB and HSL color formats by clicking on the arrow buttons. Changing the format updates the input fields accordingly, while preserving the currently selected color.

Changing the color format