🎨
Color Picker
ColorPick any color and get HEX, RGB, HSL, and CSS values with a live preview swatch.
0
0
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
Quick answers for Color Picker
What formats does the Color Picker output?
HEX (6-digit), HEX 3 (the shorthand form when applicable), RGB, and HSL. Each value is copy-ready for CSS, design tools, or code.
How do I pick a color?
Click the color swatch on the left to open your browser's native color picker, drag through the spectrum, or type a HEX value directly. The other formats update live.
Does the Color Picker check accessibility?
Yes. The Color Picker shows the WCAG contrast result for the picked color against white, with an AAA / AA / Fail badge so you can quickly tell whether the color is safe to use as text or a UI element on a white background.
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.