Color Picker

A configurable interface for color selection.

Status

The status of the component

Ready for use!

Figma component

A link to the Figma library where the component lives.

Open in Figma

Repository

A link to the repo where the component lives.

Open link

The color picker is a simple component with a native browser color input interface that lets a user specify a color by using a visual browsing interface or by entering the color into a text field in #rrggbb hexadecimal format.

Color picker closed.

Usage Guidelines

Is this the right control?

Use the color picker to let a user select colors in your interface. Some scenarios require granular color picking, while others would benefit from a more straightforward swatch picker.

Color picker example for widget border customization using Chrome.

❌ Don't

Avoid using this color picker to customize the the color of backgrounds, text, or other critical visual information that affects contrast ratio of text. This increases the risk to poor accessibility and user experience.

✅ Do

Instead, consider a bespoke solution to present the user with tested swatch options. Contact the Spark Design Team if you need help defining a swatch palette.

Behavior

Browsing and selecting colors

The color picker is used to browse through and select colors. By default, it lets a user navigate through colors on a color spectrum, or specify a color in #rrggbb hexadecimal format.

Color picker with browser’s (Chrome) color picker interface open.

Color picker with browser’s (Safari) color picker interface open.

Content

Labels

Labels in color pickers are essential for accessibility and usability, benefiting all users, including those with disabilities.

The color picker component has two label alignments: above and beside the input. The recommended label alignment for forms is above the input to align with the rest of the data input controls and minimize cognitive load. Beside-label alignment works best when laid out in a horizontal stack with other UI elements.

✅ Do

Use the right label alignment in consideration of the rest of the surrounding elements and keep in mind accessibility best practices.

❌ Don't

Avoid mixing label alignments in data inputs in forms

✅ Do

Use short labels that include the main keywords in the first two words to improve comprehension and efficiency.

❌ Don't

Avoid labels that are too long or wordy to reduce confusion and frustration.

Forms

Forms are conjunctions of elements designed for collecting information from the user.

Color Picker