Design Pattern Library 1.5

General Guidelines

Desktop/Web

Mobile (Tablet & Phone)

Visual Design Guidelines

Mobile - Color Picker

Problem

The application allows the user to set colors for specific elements (e.g., grid rows, backgrounds, etc.).

Solution

Provide a color picker that gives the user the ability to choose any color by HSB (Hue, Saturation, Brightness), RGB (Red, Green, Blue) or hexadecimal values.

Why

A color picker is used to preview and test color values. Users typically choose colors via an interface with a visual representation of a color – often organized with quasi-perceptually-relevant hue, lightness, and saturation dimensions – instead of keying in alphanumeric text values. Because color appearance depends on comparison of neighboring colors, many interfaces attempt to clarify the relationships between colors.

Examples