🎨
Color Picker
Color
Pick any color and get HEX, RGB, HSL, and CSS values with a live preview swatch.
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 and convert colors between HEX, RGB, HSL, and CMYK formats. Get WCAG contrast ratio checks for accessibility compliance.
See moreSee less about the Color Picker
Perfect for designers and developers who need to work with color values across different formats.
Examples
Color Formats
HEX: #3498db
RGB: rgb(52, 152, 219)
HSL: hsl(204, 70%, 53%)
CMYK: cmyk(76%, 30%, 0%, 14%)Convert any color between all major formats.
Contrast Check
Foreground: #ffffff
Background: #3498db
Contrast ratio: 4.6:1
WCAG AA: Pass (normal text)
WCAG AAA: Fail (normal text)
WCAG AA: Pass (large text)Check if your color combination meets accessibility standards.
Key features
- All color formats
- WCAG contrast checking
- Visual picker
- Copy values
Related Color tools
Related Blog Posts
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.