About Color Picker
Color Picker is a browser-based tool for exploring, converting, and validating colors. Drag around the HSV square, adjust hue and alpha, and instantly see the value in seven formats — HEX, RGB, HSL, HSV, CMYK, LAB, and OKLCH — along with an accessibility check for WCAG contrast against white and black backgrounds. A palette engine derives shades, tints, and classic color harmonies from your chosen base.
Everything runs client-side. Colors, palettes, and share links stay on your device — nothing is uploaded. The share link encodes the color in the URL fragment, so pasting it to a colleague sends the exact same picker state without touching a server.
100% client-side: conversions and contrast calculations happen in your browser. Safe for use with brand colors, unreleased designs, and internal palettes.
How to use Color Picker
Pick a color
Drag on the picker square (saturation × brightness), the hue slider (rainbow bar), or the alpha slider. Or type a value into any format field.
Check the conversions
Every format updates live. Click Copy on any row to grab that specific format.
Check contrast
The two panels show the WCAG contrast ratio against white and black — with pass/fail badges for AA and AAA at both normal and large text sizes.
Generate palettes
The Shades tab gives 10 lightness variations. Harmonies gives complementary, analogous, triadic, and tetradic partners. Click any swatch to load it.
Key Features
Seven format conversions
HEX / HEX8 (with alpha), RGB / RGBA, HSL / HSLA, HSV, CMYK (for print workflows), LAB (perceptually uniform), OKLCH (modern CSS color model). Each format has its own Copy button.
Eyedropper
On supported browsers (Chrome, Edge), click the Eyedropper button and pick any pixel from your screen — useful for grabbing colors from images or other apps. Falls back gracefully on unsupported browsers (Safari, Firefox).
WCAG contrast checker
Live contrast ratio against white and black, with AA / AAA badges for both normal (16 px) and large text (24 px+). Failing badges are red, passing are green — no ambiguity.
Shade palette
Ten lightness variations from very-light to very-dark, generated in HSL space. Click any shade to make it the new selected color — quick way to explore a color family.
Color harmonies
Complementary (opposite on the wheel), analogous (30° apart), triadic (120° apart), tetradic (90° apart), and monochromatic. Great for kick-starting a palette from one brand color.
Session history
Last 10 picked colors kept in memory. Clears when you close the tab — nothing persisted.
Share link
Copy a URL that opens the picker with your exact color pre-loaded. Great for design reviews.
Common Use Cases
- Grabbing brand hex codes without opening a design tool
- Checking accessibility contrast before shipping a component
- Converting between HEX and CMYK for print workflows
- Generating a tint/shade palette from a single brand color
- Finding a complementary accent for a hero button
- Reading a color's OKLCH value for modern CSS
- Testing dark-mode readability by flipping between vs-white and vs-black
- Sending a designer the exact color as a share link
- Quickly digitizing a printed color via the eyedropper on an image
Security & Privacy
- 100% client-side: conversions, contrast, palettes all run in your browser.
- Works offline: disconnect after page load and it still works.
- Share links are local: the color is encoded in the URL fragment (
#hex) — never sent to any server. - Eyedropper permission: you approve each screen-color pick individually via the browser.
- No account, no ads, no logging.