Color Picker
Pick colors and get hex, RGB, HSL values
How your color appears to viewers with different types of color vision deficiency. ~8% of men have some form of CVD.
How to use
- Click on the color picker
- Select your color
- Copy color codes in various formats
Use cases
- Web design
- Brand color selection
- UI/UX design
- Color palette creation
About the Color Picker
A color picker lets you select any color visually and see every representation web and design tools accept: hex codes for CSS, RGB for image editing, HSL for design systems, RGBA/HSLA for transparency. This picker handles 3-, 6-, and 8-digit hex, bounds-clamps invalid RGB/HSL input, and offers one-click copy in every format.
Features
- Native color picker + text input
- 3-digit (#FFF), 6-digit (#FFFFFF), and 8-digit (#FFFFFFAA) hex
- HEX, RGB, RGBA, HSL, HSLA output
- Copy each format with one click
- Live preview swatch
How it works
- Click the color swatch or type a hex code.
- Read the equivalent RGB, RGBA, HSL, and HSLA values.
- Copy whichever format you need.
Frequently asked questions
What's 8-digit hex?
+
CSS accepts #RRGGBBAA where AA is alpha transparency (00 = fully transparent, FF = fully opaque). It's the simplest way to express alpha without switching to rgba().
Why do HSL values look wrong after roundtrip?
+
HEX and HSL aren't perfectly mutually invertible due to rounding — you'll see values within ±1 of the original. This is normal.
Is RGB or HSL better?
+
Use HSL when editing (it's perceptually intuitive: hue, saturation, lightness). Use HEX or RGB for storage and CSS.
What's the difference between HSL and HSV?
+
HSL's lightness axis goes from black to white via the pure color at 50%. HSV's value axis goes from black to the pure color at 100%, never pure white. Designers typically prefer HSL.
Does the eyedropper work?
+
Yes, on Chromium browsers. Safari and Firefox don't currently support the EyeDropper API.