Numeric input should convert among hex and common colour models

What it is

Besides chips and sliders, a picker must accept typed values and convert among hex and common models (RGB, HSL/HSV, sometimes CMYK or Lab). A designer pastes #1A73E8 from a spec, an engineer pastes rgb(26, 115, 232) from code, a print file gives CMYK — one colour, different doors. Accepting only one notation serves only one trade. Conversion is several readings of one internal colour, not three unsynchronised fields.

Why it happens

Machines store channels. People use several notations: hex compresses RGB into a string; HSL names the same point as hue/saturation/lightness, which is handy for “a bit lighter.” Conversion lets someone work in the notation they know while the others stay in lockstep. When they drift — the H slider moves, hex stays old — people do not know which copy will submit, and they paste repeatedly to “calibrate.”

Parsing must also tolerate legal variants: #abc and #AABBCC, with or without #, either case, 8-digit hex with alpha. Rejecting those variants makes the typed channel treat a legal colour copied from elsewhere as an error. Conversion between models loses precision (especially via CMYK or wide gamuts); the UI should admit rounding rather than jittering to a just-noticeable other colour every time the model switches.

Where it stops holding

If end users never type a colour, the numeric region may fold away, but not so far that paste is impossible — occasional brand colours still arrive by paste. Contexts that forbid transparency should refuse alpha and say so, not silently drop the fourth channel. Out-of-gamut values (a Display-P colour stuffed into an sRGB control) need a clipping notice; conversion is not “always a perfect round trip.” Typed fields need accessible names (“hexadecimal,” “red channel”), not only an unassociated letter nearby.

Applying it

• Offer hex and at least one of RGB / HSL; changing any end updates the others.
• Accept common legal variants; on error, say which span failed to parse rather than reddening the whole box.
• Keep the same visual colour across model switches, and let preview — not jittering digits — express rounding.
• How to check: paste #1a73e8, 1A73E8, and rgb(26, 115, 232). All three should land on one preview; then change L, and hex must follow.

Related

• Within the group: E3.15.1 A colour picker needs both a preset palette and a custom value · E3.15.3 The picked colour needs an immediate swatch preview · E3.15.4 Picking a colour does not replace contrast and other access checks
• Adjacent: E2.07 Input Masks · E2.19 Currency, Units, and Magnitude Input
• Search terms: hex color · HSL RGB conversion · color input