Using the Color Picker

Tapping either the foreground or background swatch in the Check view opens the color picker for that color. The picker has four input methods: the saturation/brightness area, the hue slider, the shade row, and a hex input field.

The saturation and brightness area

The large square area at the top of the picker is a two-dimensional HSV (hue, saturation, value) selector.

• Horizontal axis controls saturation - left is fully desaturated (grey), right is fully saturated (vivid)
• Vertical axis controls brightness - top is bright, bottom is dark

Drag the circle handle to select any combination of saturation and brightness within the current hue. On iOS, touch and drag directly in the field. On the web, click and drag.

The hue slider

The horizontal rainbow bar below the saturation area controls the hue - the base color. Drag the handle left and right to move through the visible spectrum from red through orange, yellow, green, cyan, blue, violet, and back to red.

Moving the hue slider updates the saturation area to show the full range of saturation and brightness for that hue.

The shade row

Below the hue slider, a row of seven preset shades for the current hue gives you quick access to common light, mid, and dark tones. Tap any swatch to jump directly to that shade. The currently selected shade is highlighted with a white border.

The hex input

At the bottom of the picker, a text field shows the current color as a six-character hex code (without the # prefix). You can:

• Type any valid six-character hex code to jump directly to a specific color
• Use it to copy the current hex value for use elsewhere

The hex input updates in real time as you move the picker handles, and the picker updates in real time as you type.

Applying and cancelling

Tap Done to apply the selected color and return to the Check view. The foreground or background swatch updates immediately and your contrast results recalculate.

Tap Cancel to discard any changes. On iOS, if you made changes since opening the picker, a confirmation prompt asks whether you want to discard them before closing. On the web, Cancel closes the picker immediately.

Tips

• If you already know your exact color, type the hex code directly - it is the fastest input method
• The shade row is useful for quickly exploring the dark-to-light range within a hue
• Moving to the far left column of the saturation area gives you pure greys, regardless of hue
• Moving to the bottom row gives you near-black, regardless of hue or saturation