Month: November 2018

Color Picker Popover

, Updated:

The color picker popover consists of a color picker within a popover. It enables the user to choose a color from the color spectrum or define it numerically using hex, RGB(A), HSL(A), or HSV(A) values. You can use it to offer color selectors on toolbars (for example, triggered by a button).

Color picker popover
Color picker popover

Usage

Use the color picker popover if:

  • Selecting any color freely is the typical use case (for example, for user-created content).
  • There is no need for or benefit from a predefined color palette.
  • Selecting a color is needed as a toolbar action. In this case, use a button or menu button to trigger the color picker popover.

Do not use the color picker popover if:

  • You want to let users select a color directly on the page (for example, inside a form). Use the color palette instead.
  • A predefined palette is beneficial. Use a color palette popover instead.

Responsiveness

The color picker popover supports cozy and compact content densities. On a phone, the color picker popover turns into a full-screen dialog.

Size S
Size S
Size M
Size M
Size L
Size L

Layout

The color picker popover consists of a popover containing a color picker and a toolbar.

The color picker consists of the following elements:

  • The color picker box for setting lightness and saturation
  • Sliders for setting the hue and transparency (“alpha channel”)
  • Form elements for:
    • Displaying the current and new color settings (Prior to any selection, the default color is white. However, the app developer can set a different predefined color using the setSelected method.)
    • Setting the color as a hexadecimal (hex) value
    • Setting the color as red/green/blue (RGB) value (0 to 255 each)
    • Setting the color as hue/saturation/lightness (HSL) value (hue: 0 to 360 degrees, saturation: 0% to 100%, lightness: 0% to 100%)
    • Setting the transparency (“alpha channel”) value of the color (0.00 for full transparency to 1.00 for opaque)

The toolbar contains two buttons: OK (emphasized) and Cancel.

Types

The color picker popover comes in 3 variants with different levels of complexity:

  • Simplified: The simplified color picker offers basic color manipulation represented only with a hex value, without an alpha value. It shows the current and new color. Text input is only possible for hex values.
'Simplified' color picker popover
'Simplified' color picker popover
  • Default: The default color picker allows all settings. It displays input fields either for red / green / blue / alpha or for hue / saturation / lightness / alpha. End users can switch between both sets of input fields.
'Default' color picker popover
'Default' color picker popover
  • Large: The large color picker allows all settings and displays all fields at the same time.
'Large' color picker popover
'Large' color picker popover

Behavior and Interaction

Colors can be selected using mouse/touch or a keyboard:

  • 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 / page down keys, as well as on home and end keys. The color picker box is not keyboard-enabled.

The color change can be applied immediately. The OK button confirms the selection of the new color and closes the popover. The Cancel button closes the color picker popover without applying the new color.

Guidelines

  • To trigger the color picker popover, use a button or a value help icon from an input field.
  • Show the selected color in another place (for example, as a color value inside the triggering input field). The color picker popover closes as soon as a color is selected.
  • Use the simplest color picker popover type that does the job.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

Color Palette Popover

, Updated:

The color palette popover encapsulates the color palette and the color picker within a popover. You can use it to offer color selectors on toolbars (for example, triggered by a button). The popover allows users to select one of up to predefined 15 colors, or define any other color in a second step if none of the predefined colors fit.

The color palette popover is also used inside the rich text editor for changing text and background colors.

Color palette popover
Color palette popover

Usage

Use the color palette popover if:

  • Selecting a color from a predefined palette is the typical case.
  • Users may sometimes need to define their own colors, but in most cases a predefined color or default color is sufficient.
  • Selecting a color is needed as a toolbar action. In this case, use a button or menu button to trigger the color palette popover.

Do not use the color palette popover if:

  • You want to let users select a color directly on the page (for example, inside a form). Use the color palette or the color picker instead.
  • Users will nearly always define a color of their own, and rarely use the predefined palette. In this case, use the color picker popover instead.

Responsiveness

The color palette popover supports cozy and compact content densities. On a phone, the color palette popover turns into a full-screen dialog.

Size S
Size S
Size M
Size M
Size L
Size L

Components

The color palette popover consists of:

  • A link to select the default color (optional)
Color palette popover with default color selection
Color palette popover with default color selection
Color palette popover containing only a color palette
Color palette popover containing only a color palette
  • A link that opens a color picker in a dialog (optional). The color picker popover comes in three flavors: simplified, default, and large (property: displayMode). For more information on the three display options, see color picker popover types.
Color palette popover with the option to set any color
Color palette popover with the option to set any color
'More Colors...' opens a color picker dialog
'More Colors...' opens a color picker dialog
You can also display a simplified version of the color picker.
You can also display a simplified version of the color picker.
  • Recent colors (optional). Users can see the last 5 colors they have recently picked. This function helps users to select colors that they have already chosen from the color picker. By default, this feature is visible.
Color palette popover with 5 recent colors
Color palette popover with 5 recent colors
Color palette popover with just one recent color
Color palette popover with just one recent color

Behavior and Interaction

To select a color, users can:

  • Click the Default Color link.
  • Select a color in the predefined color palette or from the recent colors.
  • Click More Colors… to select any other color. This opens the color picker.
  • With the liveChange event, the color change can have an immediate effect and allows app developers to be aware of real-time color changes before they close the popover that contains it.

On a keyboard, users can navigate within the color palette popover using the arrow keys. Pressing SPACE or ENTER selects a color or triggers a link.

As soon as a color has been selected, the color palette popover closes automatically.

Guidelines

  • To trigger the color palette popover, use a button or a value help icon from an input field.
  • Show the selected color in another place (for example, as a color value inside the triggering input field). The color palette popover closes as soon as a color is selected.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

Color Picker

, Updated:

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

Color picker
Color picker

Usage

Use the color picker if:

  • Selecting any color freely is the typical use case.

Do not use the color picker if:

  • Users need to select one color from a predefined set of colors. Use the color palette 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

The color picker supports cozy and compact content densities.

Size S: Color picker opens in responsive popover
Size S: Color picker opens in responsive popover
Size M – Cozy form density
Size M – Cozy form density
Size L – Compact form density
Size L – Compact form density

Layout

The color picker consists of the following elements:

  • The color picker box for setting lightness and saturation
  • Sliders for setting the hue and transparency (“alpha channel”)
  • Form elements for:
    • Displaying the current and new color settings (Prior to any selection, the default color is white. However, the app developer can set a different predefined color using the setSelected method.)
    • Setting the color as a hexadecimal value
    • Setting the color as red/green/blue (RGB) value (0 to 255 each) (optional)
    • Setting the color as hue/saturation/lightness (HSL) value (hue: 0 to 360 degrees, saturation: 0% to 100%, lightness: 0% to 100%) (optional)
    • Switching between RGB and HSL values (if applicable)
    • Setting the transparency (“alpha channel”) value of the color (0.00 for full transparency to 1.00 for opaque)
Schematic visualization of the color picker
Schematic visualization of the color picker

Types

The color picker comes in 3 flavors:

  • Simplified: The simplified color picker offers settings for hue, saturation, and lightness, but not for the alpha channel. It shows the current and new color. Text input is only possible for hex values.
'Simplified' color picker
'Simplified' color picker
  • Default: The default color picker allows all settings. It displays input fields either for red / green / blue / alpha or for hue / saturation / lightness / alpha. End users can switch between both sets of input fields.
'Default' color picker
'Default' color picker
  • Large: The large color picker allows all settings and displays all fields at the same time.
'Large' color picker
'Large' color picker

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 / page down keys, as well as on home and end keys. The color picker box is not keyboard-enabled.

Guidelines

  • Do not place the color picker directly on a page. Always offer the picker in a popover or dialog.
  • Use the simplest color picker type that does the job.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

Color Palette

, Updated:

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.

Color palette
Color palette

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:

Responsiveness

The color palette supports cozy and compact content densities.

Size S
Size S
Size M
Size M
Size L
Size L

Components

  • A link to select the default color (optional).
  • The color palette, consisting of 2 to 15 color buttons.
  • Recent colors (optional). Users can see the last 5 colors they have recently picked. This function helps users to select colors that they have already chosen from the color picker. By default, this feature is visible.
Color palette with all optional features
Color palette with all optional features
Color palette with 15 colors and just one recent color
Color palette with 15 colors and just one recent color

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.

With the liveChange event, the color change can have an immediate effect and allows app developers to be aware of real-time color changes before they close the popover that contains it.

Hovering over a color provides a visual feedback.

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

Visual feedback on hover
Visual feedback on hover

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

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation