Color Picker client-side ?
How to use Color PickerPick a color and get its HEX, RGB, HSL and CMYK values, then generate harmonies (complementary, triadic, analogous…), a ramp of lighter and darker tints and shades, and check WCAG contrast (AA/AAA ratios) against a second color to keep your text accessible. A colorblindness preview helps validate your choices. Everything is computed in your browser.
?
Pick a color and get its HEX, RGB, HSL and CMYK values, then generate harmonies (complementary, triadic, analogous…), a ramp of lighter and darker tints and shades, and check WCAG contrast (AA/AAA ratios) against a second color to keep your text accessible. A colorblindness preview helps validate your choices. Everything is computed in your browser.
Palettes, harmonies, shades and WCAG contrast from one color.
How to use Color Picker
Pick a color and get its HEX, RGB, HSL and CMYK values, then generate harmonies (complementary, triadic, analogous…), a ramp of lighter and darker tints and shades, and check WCAG contrast (AA/AAA ratios) against a second color to keep your text accessible. A colorblindness preview helps validate your choices. Everything is computed in your browser.
Frequently asked questions
What is a good WCAG contrast?
For normal text, aim for a ratio of at least 4.5:1 (AA) or 7:1 (AAA). For large text, 3:1 (AA) is enough. The tool shows the ratio and the matching badges.