Color Picker
100% LocalAdvanced color picker with HEX, RGB, HSL and CMYK support.
Aesthetic Check
AllDevToolsHub uses Electric Cyan (#00F5FF) as its core signal color. This picker helps you find complementary accents for your own projects.
Privacy note
This tool runs entirely in your browser. Your input is never uploaded, logged, or sent to AllDevToolsHub or anyone else, and it keeps working offline once the page has loaded.
How to Use Color Picker
Pick a Color
Use the visual picker, eye-dropper, or type a HEX/RGB/HSL value.
Adjust Format
Switch between HEX, RGB, HSL, CMYK, and OKLCH representations.
Check Contrast
Test the color against a background for WCAG AA/AAA compliance.
Copy Value
Copy the color in any format, CSS variable, Tailwind token, or raw value.
Color Picker: the essentials
The Color Picker converts between HEX, RGB, HSL, HSV, CMYK, and OKLCH, with eye-dropper screen-capture, palette extraction, and built-in WCAG contrast checking. The all-in-one tool for finding, refining, and validating colors before they ship to production.
Key points
- HEX, RGB, HSL, HSV, CMYK, and OKLCH each describe the same color differently, HSL is intuitive for tuning, OKLCH is perceptually uniform, RGB is what the screen actually renders.
- WCAG AA requires 4.5:1 contrast for normal text and 3:1 for large text, light grays that look readable often fail this numerically, so always check the ratio.
- OKLCH (Chrome 111+, Safari 16.4+) keeps lightness consistent across hue rotations, so palettes and gradients no longer pass through muddy gray midpoints.
- The EyeDropper API works in Chrome 95+ and Edge 95+ to sample any pixel on screen, including across browser tabs and other applications, with no server upload.
When to use it
- Building a design system where you need mathematically balanced light and dark shades, store base colors in OKLCH and shift L to derive consistent variants.
- Auditing an existing UI for accessibility by sampling foreground and background pairs with the eye-dropper and verifying each ratio against WCAG AA before launch.
- Preparing print-ready brand collateral where on-screen RGB must be soft-proofed in CMYK, since most vibrant screen colors fall outside the printable gamut.
- Extracting a palette from a hero image or moodboard, then exporting the result directly as CSS variables, a Tailwind extend.colors object, or Figma tokens.
Common mistakes
- Picking colors by hue rotation in HSL and shipping them, saturation appears wildly different at hue 60 (yellow) vs hue 240 (blue) at identical S/L values.
- Trusting the eye to judge contrast on light-gray text over white backgrounds; #AAAAAA on white is only 2.85:1 and fails WCAG AA for body copy.
- Using rgba(0,0,0,0.5) text and assuming contrast holds, the effective color depends on the background it sits over, so the ratio shifts as content scrolls.
- Shipping wide-gamut color(display-p3 1 0 0) values without an sRGB fallback, which leaves users on non-P3 displays seeing browser-clamped or undefined colors.
Learn More
What is Color Picker?
Frequently Asked Questions
Technical Deep Dive
Color Picker
A professional-grade color tool for designers and developers. Explore palettes, extract colors from images, and convert between all major formats. Includes contrast ratio checking and CSS snippet generation.
Use this when you need HEX, RGB, HSL, and OKLCH for one pixel without opening Coolors or an OS picker that cannot copy CSS.
Pick #10B981. You should get rgb(16, 185, 129) and an HSL near 160 84% 39%. That is the site’s primary green.
OKLCH is the better interpolation space for gradients. HEX is still what most design tokens store.
01 Color Space Comparison Matrix
| Model | Type | Primary Benefit | Recommended Use |
|---|---|---|---|
| HEX / RGB | Hardware | Native Browser Support | Production CSS |
| HSL | Cylindrical | Human Intuitive Tuning | Legacy Design Systems |
| OKLCH | Perceptual | Uniform Lightness | Modern UI / Gradients |
| P3 | Wide Gamut | High Dynamic Range (HDR) | Rich Visual Assets |
| CMYK | Subtractive | Print Reproduction | Brand Collateral |
02 Color Engineering Pipeline
03 Real Sampling Workflows
A color picker earns its keep when you are extracting a single value from a real artifact, a logo, a screenshot, a hero image, and need every downstream format at once. Here are the situations the picker is built for.
-
Sampling a Brand Color from a Logo Designers ship PNG logos without a hex spec attached. Drop the logo onto the canvas, click the brand mark, and read off HEX/RGB/HSL/OKLCH simultaneously. The OKLCH value is the one to store in tokens, it survives lightness shifts cleanly.
-
Accessibility-Tuning a Brand Color A brand orange might be gorgeous but fail WCAG against white. Use the picker's live contrast readout to nudge lightness in HSL until you hit 4.5:1, without abandoning the brand hue. This is the daily reality of design-system token work.
-
Deriving Accents from a Hero Image A hero photograph carries 3-5 colors that the rest of the page should echo. Sample those tones from the image, then nudge each into a usable UI hue (lift lightness, drop saturation) so the page feels visually unified with the photograph rather than competing with it.
-
DevTools Color Inspection Workflow Chrome's EyeDropper API (the picker uses it where available) lets you sample any pixel on screen, including inside other tabs. Useful when reverse-engineering a competitor's palette or matching a screenshot in a Notion doc.
-
Picking Tinted Variants in HSL Once you have a base hex, lock the hue and drop saturation by 40 + lift lightness by 30 to produce a tinted background variant for cards. Doing this by eye in HSL is faster than running a math pipeline.
04 Worked Examples
Sampled pixel = brand primaryHEX #3B82F6
RGB rgb(59, 130, 246)
HSL hsl(217, 91%, 60%)
OKLCH oklch(0.62 0.19 259)
Store OKLCH in your design tokens. It interpolates cleanly when you generate dark-mode variants, HSL produces muddy mid-tones, OKLCH does not.
--brand: hsl(217, 91%, 60%); /* the brand /--brand-tint: hsl(217, 60%, 96%); /same hue, washed out /
Hue stays at 217 across both variants, that is why HSL is still the right space to tune in even when you store OKLCH. Locking H keeps the family identity intact.
background: rgba(128, 128, 128, 0.5); /expecting "half-grey" /
/Perceived ~0.21 luminance, not 0.5, gamma 2.2 squashes mid-tones.
Use a lighter mid (rgb 188) if you want visually "half" of white. */
background: rgba(188, 188, 188, 0.5);
The gap between picked-color and composited-color is sRGB gamma. The picker shows the raw RGB; what you see on screen has been through a non-linear curve.
05 Related Tools
The picker gives you one color at a time. These adjacent tools turn that single sample into a system, a palette, a contrast audit, an accessibility check across vision types.
Color Contrast Checker
Once you have a sampled color, this is where you validate it against any background for WCAG AA/AAA before locking it into tokens.
Color Blindness Simulator
Run your sampled color through protanopia/deuteranopia/tritanopia filters, a brand red and brand green can collapse into one tone for ~5% of viewers.
Accessible Palette Builder
Take a single sampled hue and generate a full 50-950 ramp where every step is guaranteed-accessible against the surrounding shades.