Picks two channels of a color at once, saturation across and brightness up, by dragging a thumb in a square of the colors of one hue.
Options
The color area has no choices: it is drawn one way.
Examples
Usage
Saturation across and brightness up, over one hue. Drag the thumb, press anywhere in the square, or use the arrow keys: Left and Right for saturation, Up and Down for brightness.
With a hue slider
The hue slider under it changes the hue the square shows; both share one color.
Disabled
The square turns the disabled surface and the thumb shows no color.
Guidelines
Purpose
Changes two channels of a color at once by dragging a thumb in a square: saturation across and brightness up, over the colors of one hue. It is the quickest way to find a color by eye; the hue comes from a hue slider beside it, and an exact color from the color field.
When to use
- To choose a color by eye, with a hue slider for the hue, as the color picker's panel does.
When not to use
- To enter an exact color. Use the color field.
- To choose from a few set colors. Use the color swatch picker.
Usage rules
Do
- Put a hue slider with it, sharing one color.
- Offer the color field nearby for an exact color.
Don't
- Use it alone where the hue must change: it shows one hue only.
Anatomy
- The block, a square with the control's medium corner and a hairline edge drawn inside it, painted with the colors of one hue: white to the color across, clear to black up. The colors depend on the hue, so the page paints them as an inline background.
- The thumb part, a color thumb (
smbk-color-thumb) at the color chosen, holding the two hidden range inputs that take the keys.
Behavior
Pressing anywhere in the square moves the thumb there, and dragging moves it on. While dragged, the thumb grows a step and lifts; under reduced motion it grows at once and only the shadow fades. The area is square and fills the width it is given, up to its own width.
The area holds its own color from a first color, or follows the color the page gives it; it reports the new color as the thumb moves, and again when the reader lets go. Disabled, the square turns the disabled surface and the thumb shows no color.
In plain markup, the page paints the square's colors, places the thumb with left and top as percentages, and paints the thumb's color, updating them as the color changes.
Accessibility
What it does for you
- The area is one stop in the Tab order. Left and Right step the saturation, Up and Down the brightness; Page Up and Page Down take larger steps.
- A screen reader hears it as a two-dimensional slider, with each channel's value and the color in words.
- A press anywhere in the square is the pointer's way; the keys are the keyboard's, so neither a drag nor a steady hand is needed.
- The thumb shows a focus ring while the area has keyboard focus.
What you must do
- Give the area a name that says what it changes, with
aria-labeloraria-labelledby.
How to test
- Tab to the area: one stop takes focus, and the thumb shows its focus ring in both themes and in a forced-color mode. Press the arrow keys: the thumb moves and the color changes.
- With a screen reader, the area is read as a slider with its name, each channel's value and the color in words, and each key press announces the new color.
- Press anywhere in the square with a pointer or on a touch screen: the thumb moves there.
- With the page 320 pixels wide, the square fits and the thumb stays inside it.
Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus to the area. It is one stop. |
| Left ArroworRight Arrow | Steps the channel across the square, the saturation by default. |
| Up ArroworDown Arrow | Steps the channel up the square, the brightness by default. |
| Page UporPage Down | Takes a larger step. |
Source
The files the color area is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-color-area — Color area. Figma "Color area" 7407:327 (State: Default, Focus, Disabled).
* A square of the colors of one hue, saturation across and brightness up, with a color thumb (smbk-color-thumb)
* at the color chosen. The gradients change with the hue, so the wrapper paints them as an inline background;
* the stylesheet draws the square, its corner and the hairline edge inside it. It fills the width it is given,
* never wider than Figma's frame. Disabled, it is the disabled surface and the thumb shows no color. */
.smbk-color-area {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: var(--smbk-size-color-area-width);
aspect-ratio: 1;
border-radius: var(--smbk-radius-control-md);
background: var(--smbk-color-surface-disabled);
box-shadow: inset 0 0 0 var(--smbk-border-width-hairline) var(--smbk-color-border-edge-shade-subtle);
touch-action: none;
cursor: crosshair;
forced-color-adjust: none;
}
.smbk-color-area:has(input:disabled) {
cursor: not-allowed;
}
/* ---- high contrast (forced colors) ---- */
@media (forced-colors: active) {
.smbk-color-area {
outline: var(--smbk-border-width-hairline) solid CanvasText;
}
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| size.color-area.width--smbk-size-color-area-width | 224px | Size | |
| radius.control.md--smbk-radius-control-md | 6px | Radius | |
| color.surface.disabled--smbk-color-surface-disabled | light: #e7ebf0dark: #373d43changes with theme | Color | |
| border-width.hairline--smbk-border-width-hairline | 1px | Border width | |
| color.border.edge-shade-subtle--smbk-color-border-edge-shade-subtle | light: #0000001adark: #00000033changes with theme | Color |
Manifest
{
"name": "color-area",
"block": "smbk-color-area",
"summary": "Picks two channels of a color at once, saturation across and brightness up, by dragging a thumb in a square of the colors of one hue.",
"adapt": "css",
"axes": {},
"flags": {},
"parts": [
"thumb"
],
"figmaNodeId": "7407:327"
}