🎨
Color Picker
Color
Free color picker for HEX, RGB, HSL, and CSS values with a live preview swatch - pick any color in your browser.
0
0
Color Picker
HEX#EF4444
RGBrgb(239, 68, 68)
HSLhsl(0, 84%, 60%)
Hex 3#E44
Aa
Contrast with white
Aa
FailPoor - not enough contrast for readable text
Pick a color and copy HEX, RGB, and HSL, plus a WCAG contrast check against white. No CMYK, no eyedropper from other windows, and contrast is vs white only - use Contrast Checker for custom pairs.
See moreSee less about the Color Picker
Examples
Match a brand blue
HEX: #0EA5E9
RGB: rgb(14, 165, 233)
HSL: hsl(199, 89%, 48%)Type a 6-digit HEX or use the native color control. There is no CMYK output on this page.
Quick contrast vs white
Picked color on #ffffff → AA / AAA / Fail badge for normal textContrast is measured against white only. For arbitrary foreground/background pairs, use Contrast Checker.
Key features
- HEX, RGB, and HSL values
- Copy each format
- WCAG badge vs white
Related Color tools
Quick answers for Color Picker
What formats does the Color Picker output?
HEX (6-digit), RGB, and HSL. Each value is copy-ready for CSS or design tools. There is no CMYK output on this page.
How do I pick a color?
Click the color swatch to open your browser's native color picker, or type a 6-digit HEX value. The other formats update live.
Does the Color Picker check accessibility?
It shows a WCAG AA / AAA / Fail badge for the picked color against white only. For arbitrary foreground and background pairs, use Contrast Checker.
What's the difference between HSL and RGB?
RGB mixes red, green, and blue channels - how screens physically produce color. HSL thinks in terms of hue (which color), saturation (how vivid), and lightness (how bright), which matches how designers talk about color. Both describe the same values; HSL is just easier to reason about.
Does the Color Picker work offline?
Yes. Once the page has loaded, the Color Picker runs entirely in your browser. Bookmark it and reach for it even without an internet connection.