You can use the color palette to let users choose a color from a predefined set of colors. The colors are fixed and do not change with the theme.

Usage

Use the color palette if:

• The user needs to select one color from a predefined set of colors.
• The color set contains between 2 and 15 predefined colors.
• There is no need to offer additional colors.

Do not use the color palette if:

• Users need to be able to select any color. Use the color picker or color picker popover instead.
• Selecting a color from a predefined palette is the typical case, but users should still be able to define their own colors. Use the color palette popover instead.

Responsiveness

Components

Behavior and Interaction

Users can select a color with the left mouse button, the tap gesture, or by pressing SPACE or ENTER on a keyboard. The selected color is not indicated in the control itself.

To navigate between different colors on a keyboard, use the arrow keys.

Guidelines

• Show the selected color in another place. The color palette does not visualize the selected color.
• Label the color palette.
• If you do not want to show the color palette in-place, consider the color palette popover instead.

Resources