i

Color picker

Entering · researched

Lets a person choose a color visually or by typing a value.

molecule · also called Colour picker

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

ColorPicker native: no antd 6.6.5
Variants
single, gradient
Sizes
large, medium, small
States documented
disabled
Accessibility guidance
no

Trigger and panel built from divs; the colour value fields use antd Input (native inputs). Modes single and gradient.

2 corrected on re-read
  • builds_on_native: "partly" → "no" Trigger is div.ant-color-picker-trigger (clear swatch div role=button); native inputs only inside the opened panel
  • states_documented: null → ["disabled"] ColorPicker API: disabled

docs ↗ · code ↗

Carbon

absentCarbon does not ship this component. Nothing is drawn in its place.

Checked docs components list, react and web-components directories; grep for ColorPicker found nothing. Colour appears only as theme tokens and in data-visualization docs.

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. No colour picker. Styles > Colour documents the fixed palette only.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (20 component pages), the repo top-level dirs, labs/, labs/gb/components and the installed 2.5.0 package. color/ is a Sass colour helper (_color.scss) for theming, not a picker.

Primer

absentPrimer does not ship this component. Nothing is drawn in its place.

No color picker component. Checked: primer.style/product/components/ index, internal-components list, ui-patterns, packages/react/src tree (incl. deprecated/, experimental/, internal/).

Spectrum

Color picker contested native: partly
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
XS, S, M, L
States documented
—
Accessibility guidance
yes

Implementation: v3 ColorPicker (a swatch button trigger opening a popover with ColorEditor) and ColorEditor; S2 has no ColorPicker. Index disagreement (partial): it also mapped Color area, Color field, Color slider, Color wheel, Color handle and Color loupe; those are building blocks (documented separately, S2/v3 and SWC 1st-gen) rather than the picker. Installed SWC 1.12.4 has swatch but no color-area, color-slider, color-wheel, color-field or color-loupe. v3 docs page not read.

4 corrected on re-read
  • present: "ships" → "ships" v3 ColorPicker (swatch button opening a popover with ColorEditor); S2 has no ColorPicker export
  • sizes: null → ["XS","S","M","L"] v3 props table: size XS|S|M|L, default M (swatch size)
  • a11y_documented: "unread" → "yes" v3 page has an Accessibility section (aria-label or aria-labelledby when no visible label)
  • urls: {"docs_url":"https://react-spectrum.adobe.com/react-spectrum/ColorPicker.html","code_url":"https://github.com/adobe/react-spectrum/tree/main/packages/@adobe/react-spectrum/src/color"} → {"docs_url":"https://react-spectrum.adobe.com/v3/ColorPicker.html","code_url":"https://github.com/adobe/react-spectrum/tree/main/packages/@adobe/react-spectrum/src/color"} HTTP 200; changed: docs_url

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

Checked the docs component index and status page and the develop packages/ tree (88 entries, matching installed 3.14.0): no colour-picker component (colour appears only as design tokens).

Platform facts

Native elementinput type=colorSpec: 'there is always a CSS color picked, and there is no way for the end user to set the value to the empty string'; attributes alpha, colorspace. MDN: default #000000 when value omitted or invalid; presentation 'may vary substantially' between browsers. Custom visual pickers (hue, saturation) are not defined by HTML.
Baseline—
APG patternnone
ARIA role—
Shipped by2 of 7 systems

Anatomy

  1. color control — MDN: presentation 'may vary substantially' between browsers; a basic text input or a platform picker.
  2. alpha control optional — MDN/spec alpha attribute (experimental): indicates the alpha component can be manipulated by the end user.

The seven states

default Always holds a color (default black).
hover Pointer-only CSS state; not defined by APG or HTML.
focus Inference: focusable like other form controls; keys that open the picker are not stated in the sources.
active n/a — No distinct state defined.
disabled disabled attribute.
error n/a — Spec: value can never be empty or invalid for the user.
loading n/a — Not defined.

Every cell was read twice, the second time from raw sources by a separate pass. 6 of 35 fields changed on the second read — open any “corrected” note to see what it said before.