Color Picker & Palette Generator
Pick colors, convert between formats, and generate harmonious palettes
Color Picker
Accessibility Check
Contrast with White
Contrast with Black
Color Values
Color Palette Generator
About the Color Picker & Palette Generator
Pick any colour and instantly see it in HEX, RGB and HSL, generate harmonious palettes (complementary, analogous, triadic and more), and check text contrast against light and dark backgrounds for accessibility. Designers use it to build brand palettes, developers use it to convert between formats for CSS, and both can verify that colour combinations meet WCAG contrast guidelines before shipping.
How to use the Color Picker & Palette Generator
- Use the picker or type a HEX value to choose a base colour.
- Read the equivalent RGB and HSL values and copy the one you need.
- Explore the generated palette variations.
- Check the contrast ratios to make sure text stays readable.
Frequently asked questions
What contrast ratio do I need for accessibility?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA raises that to 7:1 and 4.5:1 respectively.
When should I use HSL instead of HEX?
HSL makes it easy to create lighter, darker or less saturated variants of a colour by adjusting one number, which is ideal for theming.
What is a complementary colour?
The colour directly opposite on the colour wheel (180° apart in hue). Complementary pairs give strong contrast and are good for accents.