Why use a color picker?
Designers, developers and store owners constantly need color codes and conversions: HEX for websites and CSS, RGB for screens and apps, HSL for easy lightness and saturation tweaks, and CMYK for print. This tool brings everything together, plus helpers for choosing harmonious, readable colors.
How to use it
- Click the large swatch to open the picker, or type a code in HEX, RGB or HSL.
- All codes update instantly; copy any of them with one click.
- Pick a lighter or darker shade, or click the complementary color.
- Check contrast to see if text in this color is readable on white or black.
- Upload an image and click any point to get its color; supported browsers can also pick from anywhere on screen.
What do AA and AAA mean?
WCAG accessibility guidelines set minimum contrast between text and background: 4.5:1 for AA with normal text, 7:1 for AAA, and 3:1 for large text. Meeting them improves readability for everyone.
Tips for brand colors
- Choose one primary color with two shades, plus a complementary accent.
- Make sure button colors meet AA contrast with their text.
- Reuse the exact same HEX codes across your site, designs and print.