Adobe Logo

Spectrum

Version 1.0.1

Color wheel

A color wheel is a combination of a circular track, which allows users to select a hue from a range of 0 to 360 degrees, and a color area inside.

An example of a color wheel with a track encircling a color area.

Table of contents#

Anatomy#

Image illustrating through labels the component parts of a color wheel, including its track, color area, handle, and loupe.

Behaviors#

key example of a color wheel labeled with customizable size.

Flexible radius#

While the thickness of the color wheel’s track is fixed (24 px on desktop, 30 px on mobile), the radius of the track is flexible and can be customized appropriately for its context. The color area inside is designed to automatically adjust to the size of the track.

Key example of a color wheel demonstrating the loupe relative to the handle on the track and finger position.

Loupe behavior (down state, finger input)#

On down (touch), a loupe appears above the handle to show the selected color that would otherwise be covered by the finger. This only appears on finger input, not mouse or stylus. It appears 10 px above the edge of the handle on desktop scale and 8 px on mobile scale.

Usage guidelines#

Display color selection#

When using color areas, it’s important to clearly display the color selection in real-time. It can be in a color swatch, or directly on the canvas, or both.

Key example of a color swatch above a color wheel and transparency slider correctly representing their combined values.

Use the circular track for hues only#

The color wheel’s track should only be used for selecting hues. Unlike color sliders, it should not be used for color channel values or opacity.

Key example of a color wheel correctly being used to select a hue.
Key example of a color wheel incorrectly being used to select a color channel value.

Keyboard interactions#

KeyInteractions
TabPlaces focus on the handle. If the handle is already in focus, moves focus to the next element in the page tab sequence.
Shift + TabPlaces focus on the previous element in the page tab sequence.
Right ArrowMoves the handle clockwise.
Left ArrowMoves the handle counter-clockwise.

Changelog#

DateNumberNotes
Mar 26, 20201.0.1
  • Updated handle border transparency to meet minimum contrast ratio
Apr 19, 20191.0.0
  • This component has been included to the website.

Design checklist#

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

N/A

Multiple options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Defined behaviors

Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don’ts that highlight best practices and common mistakes.

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

N/A

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Generated UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.