A hex code tells you the color and nothing about whether text on top of it stays readable
Copying #0D47FB out of a design file takes two seconds. Finding out three sprints later the white label sitting on top of it misses 4.5:1 by a hair takes rather longer. Most pickers hand back a hex string and stop there. This page keeps the contrast ratio against white and black on screen while you drag, so the color and its readability arrive at the same moment.
The split happens because of tooling. Design software reports color in HSB, stylesheets ship hex, print work runs on CMYK, and an accessibility audit asks for a ratio nobody has seen until the audit lands. One color, five numbers, five different windows. Everything below sits in one panel.
One color, eight ways of writing it
| Format | Example | Where you meet it |
|---|---|---|
| #4169E1 | Six hex digits | Stylesheets, design handoff, brand guidelines |
| #4169E1CC | Hex plus an alpha byte | CSS Color 4 syntax, ignored by browsers older than 2016 |
| rgb(65, 105, 225) | Three channels, 0 to 255 | Canvas, SVG attributes, most image libraries |
| rgba(65, 105, 225, 0.8) | Alpha as a decimal | Overlays, shadows, hover states |
| hsl(225, 73%, 57%) | Hue in degrees | Design tokens and any color edited by hand |
| hsv(225, 71%, 88%) | Hue, saturation, value | The HSB readout in Figma, Sketch and Photoshop |
| cmyk(71%, 53%, 0%, 12%) | Four ink percentages | Print layout, as a rough screen estimate |
| royalblue | A CSS keyword | One of the 148 names browsers recognise |
The sliders run on HSL because hex resists editing
Hex is three bytes of storage. Ask for a blue ten percent lighter and hex has no answer, because lightness is not one of the things a hex triplet stores. HSL splits the same color into hue, saturation and lightness, so each slider moves one property while the other two hold still. Drag lightness from 52 to 62 and the hue stays where you left it.
At lightness 0, and again at saturation 0, every hue collapses to the same RGB triplet. A picker reading hue back out of the swatch loses your angle at both ends and snaps to red on the way back.
This page treats H, S and L as the stored values and derives RGB from them, never the reverse. Slide lightness down to black, then back up, and the hue you picked is still there.
Contrast sits beside the swatch, not on a second page
Both tiles show your color as a background with real text on top, one white and one black. The ratio below each comes from the WCAG 2.1 relative luminance formula, the same math an audit tool runs. Three badges follow it: AA at 4.5:1 for body text, AAA at 7:1, and AA large at 3:1 for text from 24px, or 18.66px when bold.
Two limits are worth knowing before you rely on the number. Alpha is left out of the calculation, because the real contrast of a translucent color depends on the layer underneath, which this page cannot see. Anti aliased edges on thin type also read lighter than the ratio suggests, so a color scraping past 4.5:1 with a hairline font is worth testing on a real screen.
Six shapes of input are accepted
- Hex in any length. Three, four, six or eight digits, with or without the leading hash.
#e14,e14fand#EE1144FFall land on the same place. - rgb() and rgba(). Comma separated or space separated, with alpha written as a decimal or a percentage.
- hsl() and hsla(). The
degsuffix and the percent signs are optional, so a value copied out of a stylesheet pastes straight in. - A CSS keyword.
tomato,rebeccapurple,slategray. British spellings such asgreyanddimgreyresolve to the same values. - The system dialog. The small square opens your operating system picker, including the gradient area some designers prefer over sliders.
- The screen itself. The eyedropper button appears in Chrome, Edge and Opera, where the browser exposes the EyeDropper API. Firefox and Safari hide the button rather than showing one that fails.
Hue relatives are a starting point, never a finished palette
The six chips rotate the hue wheel by fixed angles: 180 degrees for the complement, 30 either side for analogous neighbours, 120 and 240 for a triad, 90 for a square. Saturation and lightness are held steady so the group reads as a set.
Equal steps on that wheel are not equal steps in how bright a color looks. Yellow at 50 percent lightness reads far brighter than blue at 50 percent lightness, because human vision weights green around six times heavier than blue. Take each chip through the contrast tiles before it goes near body text.
The color travels in the URL
The address bar updates as you drag. Bookmark the page mid pick, paste the link into a ticket, send it to whoever asked for the shade. Opening the link puts the exact color back on screen. The fragment after the hash is never sent to a server by any browser, so the link stays between you and the person you sent it to.
Recent colors are held in localStorage on your own machine. Clearing site data clears them. Nothing about your picks reaches the network, before or after the page finishes loading.
Where this picker stops
- sRGB only. No Display P3, Lab, LCH or
oklch()output. A wide gamut color sampled from a P3 screen is clipped into sRGB before the numbers appear. - CMYK is an estimate. The conversion ignores ink, paper stock and color profile, which are the three things deciding what a press puts on paper. Request a proof from your printer before signing anything off.
- Contrast ignores alpha. Drop the alpha slider below 1 and the ratio keeps reporting the opaque color, since the true figure depends on whatever sits behind the layer.
- The name is a nearest guess. Matching runs on a weighted RGB distance, which tracks human ranking closely without being a perceptual model.
#4169E2reports royalblue with a tilde in front, not an exact match. - No image sampling. You cannot upload a screenshot and pull colors out of it. The eyedropper reads live screen pixels, and only in Chromium based browsers.
- No palette export. Copy moves one value at a time. There is no ASE file, no Sketch palette, no JSON dump of the ramp.
- Rounding shows up. HSL is reported in whole degrees and whole percentages, so a round trip through the sliders shifts a hex by a digit or two. Copy the hex first when the source value has to survive exactly.
- Color blindness is not simulated. A pairing passing AA at 7:1 still fails a deuteranopic reader when the only difference between two states is red against green.
