Color wheel
<o-color-wheel> is a color picker: a hue ring around a saturation and brightness square, with optional swatches.
Drag around the ring for the hue, and inside the square for saturation (left to right) and brightness (bottom to top). The hue handle is the only satellite of an orbit-12 whose --o-from is the hue, so Orbit puts it on the ring; the ring and the square sit in center capsules. A gray keeps the hue you had, so turning the saturation back up brings it back.
Attributes
| Attribute | Default | What it does |
|---|---|---|
value | #4fd1c5 | The color: hex, rgb(), hsl() or a CSS name. It is read as hex. It is also the default a form reset returns to; the attribute follows the picker as you change it. |
format | hex | How the color is submitted with a form: hex (#1e90ff), rgb (rgb(30, 144, 255)) or hsl (hsl(210, 100%, 56%)). |
swatches | JSON: colors, or { color, label }. They go around the outside as satellites, and the picker shrinks to make room. Up to 36. | |
thickness | 1.9, 1.7 with swatches | Hue ring thickness in lanes. |
label | Color picker | Accessible name of the group, unless you give it an aria-label. |
name | Field name: with it, the picker submits its color with the form. See Forms. | |
disabled | off | Dimmed, out of the tab order and not submitted. A disabled <fieldset> does the same. |
size | 240px | Width of the widget. |
theme | dark, light or glass. Also inherited from an ok-theme-* class on a container. See Shared options. |
Properties and events
| Name | What it does |
|---|---|
value | The color as hex. Setting it takes any CSS color and fires no event, like a native input. |
rgb, hsl | The color as rgb() and hsl() text. |
colorName | A plain name, like “dark blue” or “light gray”. |
form, labels, defaultValue, validity | As on a native input. |
input | Fires on every change you make. event.detail has value (hex), rgb, hsl and name. |
change | Fires once a drag ends with a different color, on each key press and on each swatch you pick. |
picker.addEventListener('input', (e) => preview(e.detail.value))
picker.value = 'tomato'
picker.value // '#ff6347'Styling
| Property | Default | What it does |
|---|---|---|
--ok-cw-thumb-border | #fff | Ring of the handles and of the picked swatch. |
--ok-cw-swatch-border | faint white | Edge of the swatches, so dark ones show on a dark page. |
--ok-cw-radius | .3em | Corner radius of the square. |
--ok-focus | #3da9fc | Focus ring. |
--ok-font-size | 8cqmin | Base size, as a share of the widget. The square's handle scales with it. |
More examples
Swatches
A palette of your own around the picker. The swatch that matches the color is pressed.
In a form
With a name it submits like an input, here as hsl().
A light theme
Accessibility
The picker is a role="group" with two sliders, each one tab stop. The hue slider is called “Hue” and reads like “210 degrees, blue”; arrows move it one degree, Shift and Page Up or Page Down ten, Home and End go to the ends, and it wraps around. The square is called “Saturation and brightness”: Left and Right change the saturation, Up and Down the brightness, one percent at a time or ten with Shift. It reads like “Saturation 80%, brightness 60%, dark blue, #1f4c99”.
Swatches are buttons named after their label or their color, with aria-pressed on the one that matches. They share one tab stop; arrows move between them and Enter or Space picks one.