The Complete Color Picker Guide: HEX, RGB, HSL, CMYK & Palettes
Whether you're designing a website, building a brand, or just trying to match a shade you saw online, a good color picker turns guesswork into precision. Here's how to pick any col
Whether you're designing a website, building a brand, or just trying to match a shade you saw online, a good color picker turns guesswork into precision. Here's how to pick any color and convert it into every format you'll ever need.
What is The Complete Color Picker Guide?
A color picker is a tool that lets you visually choose a color and instantly see its value across formats — HEX, RGB, HSL, HSV, and CMYK. Modern pickers also generate harmonious palettes, check accessibility contrast, and even simulate how colors look to people with color blindness.
How to use it
- Drag the saturation/brightness area and the hue slider to dial in a color.
- Read the HEX, RGB, HSL and CMYK values and copy any of them with one click.
- Use the eyedropper (in supported browsers) to grab a color from anywhere on your screen.
- Generate complementary, analogous, or triadic palettes from your base color.
Key features
- Every format at once — HEX, RGB(A), HSL(A), HSV and CMYK update together as you pick — perfect for converting rgb to hex or hex to rgb.
- Color harmonies — Auto-generate complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes.
- WCAG contrast checker — See whether your color passes AA and AAA contrast against white and black for accessible text.
- Color-blindness simulation — Preview protanopia, deuteranopia and tritanopia to make sure your design works for everyone.
Tips to get the most out of it
- Use Component (encodeURIComponent-style) HEX8 values when you need transparency, e.g. #2563EB80 for ~50% opacity.
- Build a UI palette from tints and shades of a single brand color for a consistent look.
- Always check contrast — body text should hit at least 4.5:1 for WCAG AA.
Frequently asked questions
How do I convert HEX to RGB?
Type or pick a color and the tool shows HEX, RGB, HSL and CMYK side by side, updating in real time.
What is a WCAG contrast ratio?
It measures text readability against a background, from 1:1 to 21:1. AA requires 4.5:1 for normal text; AAA requires 7:1.
What's the difference between tints and shades?
A tint is your color mixed with white (lighter); a shade is mixed with black (darker).
Can I pick a color from an image or my screen?
Yes — in Chrome, Edge and Opera the eyedropper lets you grab the exact color of any pixel on screen.
Ready to try it? Open the tool and see your results instantly — it's free, needs no login, and runs entirely in your browser.
