Color Picker
Updated Free mock REST & WebSocket APIs
Drag across the picker, type any color code, or grab a pixel from your screen with the eyedropper. Every format updates instantly with a copy button, and you get tints, shades and matching color harmonies for free.
Screen eyedropper needs Chrome or Edge on desktop. To pick colors from a photo, use the image color picker.
Type or paste any format above — HEX, rgb(), hsl(), oklch() or a CSS name — and the picker follows.
Contrast of white and black text on this color (WCAG). Full contrast checker →
Opposite on the color wheel — maximum hue contrast. Hues rotate on the HSL color wheel. Build a full scale with the palette generator.
🔒 Runs entirely in your browser. Share a color by copying this page's URL — it ends with the hex code.
How to use the color picker
- Drag in the large square to choose saturation (left–right) and brightness (top–bottom), then set the hue and opacity with the sliders. Arrow keys work too — hold Shift for bigger steps.
- Or paste a value into any field —
#ff6347,rgb(255, 99, 71),hsl(9 100% 64%),oklch(69.6% 0.195 32.3)or a name liketomato. - Click Pick from screen (Chrome and Edge on desktop) to sample any pixel on your display, even outside the browser.
- Copy the format you need, or click a tint, shade or harmony swatch to explore around your color. Recent colors are kept in History.
Which color format should I use?
| Format | Example | Best for |
|---|---|---|
| HEX | #ff6347 | CSS, design handoff, brand guidelines — compact and universal |
| RGB | rgb(255, 99, 71) | Screens and code that works with channel values; rgba() adds opacity |
| HSL | hsl(9, 100%, 64%) | Tweaking by hand: change lightness without touching hue |
| HSV / HSB | hsv(9, 72%, 100%) | Photoshop, Figma and other design apps' pickers |
| CMYK | cmyk(0%, 61%, 72%, 0%) | A starting point for print — real print colors depend on the ICC profile |
| OKLCH | oklch(69.6% 0.195 32.3) | Modern CSS: perceptually even lightness, great for palettes and themes |
Why OKLCH is worth learning
In HSL, hsl(60 100% 50%) (yellow) looks far brighter than hsl(240 100% 50%) (blue) even though both say 50% lightness. OKLCH's L is designed to match how bright colors actually look, so two colors with the same L have similar contrast against white. That makes it ideal for design systems: keep L fixed and rotate the hue to get a family of equally readable colors. All modern browsers support oklch() in CSS.
Picking colors from an image
The screen eyedropper samples whatever is on your display. To pull colors from a photo or screenshot file — including an automatic palette of its dominant colors — use the image color picker on PicConvert.
Related tools
Embed this tool on your site
Browse all embeddable tools →Free for blogs, HR, payroll and contractor sites: copy one snippet — the widget sizes itself and matches your colors.
Get the embed code
Frequently asked questions
Is it free and private?
Yes. It's free with no sign-up, and it runs entirely in your browser — the colors you enter are never uploaded or logged.
Why is the Pick from screen button disabled?
It uses the browser's EyeDropper API, which Chrome, Edge and Opera support on desktop. Safari and Firefox don't support it yet; use your system picker button instead, or the image color picker for photos.
What's the difference between HSL and HSV?
Both use hue and saturation, but HSL's lightness puts pure colors at 50% and white at 100%, while HSV's value puts pure colors at 100%. Design apps' pickers (like this square) are HSV; CSS uses HSL.
How do I share a color?
Copy the page URL — it ends with the current hex code (e.g. #ff6347), so the picker opens on that color.
Are the CMYK values accurate for print?
They're the standard device-independent conversion, fine for a first pass. Professional print needs a color-managed conversion with your printer's ICC profile.
Your business here? Sponsor this tool from $16/week. See placements