Color Picker
The complete color tool for creators: pick a color visually (or grab one straight from the screen with the eyedropper), get the code in HEX, RGB, HSL and CMYK with one-click copy, generate ready-made harmonies (complementary, analogous, triadic and more), build a 10-step shade scale from any color and instantly check whether the contrast passes accessibility criteria. You can even upload an image and extract its dominant colors.
Base color
Formats
Harmonies
Click a swatch to set it as base · click the code to copy
Complementary
Analogous
Triadic
Split-complementary
Tetradic
Tint & shade scale
Click any shade to copy it.
Contrast & readability
Sample text
Sample text
Palette from image
Every format, no separate converter
Pick the color, get the code: HEX for everyday use, RGB and HSL for styles, CMYK as a print reference. Each format has its own copy button, and the input field accepts any of them — paste "rgb(255, 51, 102)" or "hsl(340, 100%, 60%)" and the tool understands.
Harmonies and shade scale
From the base color, the tool generates five harmony schemes used in design: complementary, analogous, triadic, split-complementary and tetradic — click any color in a scheme to make it the new base.
The shade scale creates 10 variations of your color, from the lightest (50) to the darkest (900), following the pattern used by modern design systems. Perfect for building a site or app palette.
Contrast and accessibility
See your color's contrast ratio on white and black backgrounds, with the AA and AAA badges from the international accessibility criteria (WCAG). You'll know before publishing whether that text will be readable for everyone.
How to use
Click the colored square to open the visual picker, type a code in the field next to it, or use the eyedropper to capture any color on screen. Formats, harmonies, scale and contrast update instantly. To extract a palette, upload an image in the last section — the six dominant colors appear ready to copy or use as the base.
Frequently asked questions
Does the tool convert between HEX, RGB and HSL?
Yes, automatically. Pick or paste the color in any format and the others appear together, each with a copy button.
What do the AA and AAA badges mean?
They are the levels of the international accessibility criteria (WCAG) for text contrast: AA requires a 4.5:1 ratio and AAA requires 7:1. The higher, the more readable the text for everyone.
How does the eyedropper work?
It captures the color of any point on the screen, even outside the page. It is available in recent desktop browsers; if the button does not appear, your browser does not offer this feature yet.
Is my image uploaded anywhere when extracting a palette?
No. The analysis happens entirely on your device and the image never leaves it.