Intro

The color palette popover encapsulates the color palette and the color picker within a popover.

Intro - Color Palette Popover

When to Use

Do

Use the color palette popover:

  • To let users select a color from a predefined palette (typical use case).
  • If users typically select a predefined color, but may also need to define their own colors.
  • If you need to offer color selection as an action in a toolbar.

Don't

Don’t use the color palette popover:

  • For selecting a color directly on the page. Use the color palette or the color picker instead.
  • If users will nearly always define a color of their own, and rarely use the predefined palette. In this case, use the color picker instead.

Anatomy

Anatomy of a color palette popover

Anatomy of a color palette popover

  1. Color palette container: Contains all activated elements.
  2. “Default Color” button (optional): This button allows users to select or revert to a predefined default color.
    For the default color, use one of the predefined colors in the swatch container.
  3. Swatch container: A set of predefined colors for easy selection.
    You can define between 2 and 15 colors.
  4. Swatch: Single color, part of the palette.
  5. “More Colors…” button (optional): Opens the color picker.
  6. Recent colors (optional): Section displaying the last 5 colors picked.

Behavior and Interaction

Opening and Closing a Color Palette Popover

The color palette popover opens when the user clicks on a triggering text link or button.

The color palette popover closes when the user clicks outside the popover or selects a color within the popover.

Selecting a Color

The user can select a color in the following ways:

  • Click Default Color to select the predefined default color
  • Select a color from the predefined color palette
  • Click More Colors… to select a color using the color picked
  • Select one of the the recent colors

Opening and closing a color palette popover

Responsive Behavior

On a phone, the color palette popover turns into a full screen dialog.

Color palette popover on a phone

Color palette popover on a phone

Components

Implementation

Specifications

Components

Implementation