Color picker
Pick on the square, slide the hue, or type any HEX, RGB or HSL value, the other formats follow instantly, with contrast checked as you go.
Guide
How to use it
- Drag on the square for saturation and brightness, slide the vertical bar for hue.
- Or type into any field, HEX, RGB or HSL, the picker and the other two formats update live.
- Copy whichever format your code wants with its copy button.
- Check the WCAG panel: 4.5:1 is the bar for body text. Recent picks stack below, tap one to restore it.
- In Chrome and Edge, Pick from screen samples any pixel on your display.
Examples
Reading the three formats
HEX: two hearsay-proof digits per channel, red 2E, green 6B, blue 98. The format CSS made universal, and the one to paste into brand guidelines.
The same colour as decimal channels, 0 to 255. Handy in JavaScript and design tools that expose channel sliders.
Hue 207° (blue), 54% saturated, 39% light. HSL is the format for reasoning: darker means lower L, muted means lower S, no arithmetic on hex pairs.
Method
How it works
Internally the picker works in HSV (the square is saturation against brightness at a fixed hue), converting to RGB for display and to HEX and HSL notation on the fly, the standard formulas, applied both directions so you can type in any format.
Contrast ratios follow the WCAG 2.1 relative-luminance formula: 4.5:1 minimum for body text, 3:1 for large text. The eyedropper uses the EyeDropper API where the browser provides it, sampling stays on your machine.
FAQ
Frequently asked questions
What is the difference between HEX and RGB?
Notation only, #2E6B98 and rgb(46, 107, 152) are the same 24 bits. HEX is compact for CSS, RGB is friendlier to arithmetic.
When should I use HSL?
When adjusting: "same colour, 10% darker" is one number in HSL and a puzzle in HEX. Design systems increasingly define palettes in HSL for exactly this.
Why does the eyedropper button not appear for me?
The EyeDropper API currently ships in Chromium browsers (Chrome, Edge, Opera). Firefox and Safari have not implemented it, the picker square and fields work everywhere.
What do the contrast numbers mean?
The ratio between your colour and white or black. Text needs 4.5:1 against its background to meet WCAG AA, large headlines get away with 3:1.
Can I build a palette here?
Recent picks keep your last ten colours one tap away. For extracting a palette from a photo, use the image colour picker page.
Does alpha (transparency) feature?
No, this picker is deliberately opaque-only. An alpha channel is one more slider that most colour decisions never need.
More tools