Color Picker

Pick any color and get HEX, RGB, HSL, shade ramps and contrast ratios — entirely in your browser, with nothing ever sent to a server.

Set a color with sliders, type a HEX value, use your system's native picker, or sample any pixel on screen with the eyedropper — and instantly get every format you need, a 10-step shade ramp, a tint ramp, and WCAG contrast verdicts against black and white. One click copies any value. The entire tool is a single HTML file with zero network requests.

What it does

Web color pickers mostly fall into two camps: bare-bones converters that give you one format, and full design-suite tools that demand an account before showing anything useful. This one sits in the useful middle: every conversion runs in JavaScript on the page, the eyedropper uses your browser's own screen-sampling API (nothing is screenshotted or uploaded), and the contrast checker applies the real WCAG relative-luminance formula so accessibility claims are computed, not guessed. There is no server behind the tool — load it, go offline, and it keeps working.

Who it's for: front-end developers and designers grabbing brand colors, photographers matching a tint across a gallery, anyone writing CSS who needs to know "will white text on this actually pass AA?"

What it explicitly does not do: it does not extract palettes from images (that's a separate tool), does not save palettes between sessions (state lives only in this tab), does not simulate color-blindness, and does not export ASE/JSON/CSS-variable files. If you need saved, exportable palettes with team sharing, that's what the download adds.

Features

• Four input paths: HSL sliders, HEX (3- and 6-digit), native color picker, and the EyeDropper API (Chrome/Edge) with a graceful fallback message elsewhere.
• HEX, RGB and HSL outputs, each with a one-click copy button.
• 10-step shade ramp (darker) and tint ramp (toward white), every swatch click-to-copy.
• WCAG contrast ratios against white and black, with an automatic "passes AA" / "fails AA" verdict for whichever background the color works better on.
• Dark-mode aware UI that never affects the color values themselves.

FAQ

Does anything I pick get uploaded?
No. All color math runs in JavaScript inside the page, and the eyedropper uses your browser's own local screen-sampling API. Open the network tab and watch it stay empty.

Which browsers support the eyedropper?
Chrome and Edge support the EyeDropper API. Safari and Firefox don't yet — there the tool says so honestly and offers the native picker instead. All other features work in every modern browser.

Are the contrast ratios real WCAG math?
Yes — the standard relative-luminance formula (sRGB linearization, 0.2126/0.7152/0.0722 weights), the same one W3C specifies, computed live.

Can I use the colors commercially?
Yes. Colors aren't licensable; the tool imposes no restrictions on what you build with them.

Is there a subscription?
No. One-time purchase, single self-contained file, no recurring charges.