The color picker allows users to choose any color and provides different input options for selecting colors.

Color picker

When to Use

Use the color picker:

• To let users select any color freely.

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.
• For placement directly on a page. Always offer the picker in a popover or dialog.

Anatomy

1. Color picker container: Indicates lightness and saturation.
2. Sliders:
   1. Modifies the hue
   2. Modifies the transparency (“alpha channel”)
3. Color comparison fields: Display the current color (left) and the new color setting (right).
4. Hex input: Field for entering and displaying the color as a hexadecimal value.
5. Color mode panel: RGB(A) inputs.

Behavior and Interaction

• Mouse/touch: Users select a combination of saturation and lightness in the color picker box (click and drag). Hue and alpha values are selected with sliders.
• Keyboard: The tab key is used to set the focus on the sliders and input fields. Values are entered using the corresponding input controls. The sliders react on arrow keys, Page Up/Down keys, as well as on Home and End keys. The color picker box is not keyboard-enabled.

Responsive Behavior

The color picker supports cozy and compact content densities.

Related Links