Color Tools · Picker and Palette Generator
Pick a color and see its HEX, RGB, HSL, HSB (HSV) and CMYK values at a glance, copyable with one click. Choose a harmony rule on the color wheel — complementary, analogous, triadic, tetradic or monochromatic — and a matching five-color palette is generated for you. Check background and text contrast against WCAG levels, and preview the palette as protanopia, deuteranopia, tritanopia or greyscale to confirm it still reads for people with color vision deficiency. Palettes you like can be saved in this browser.
Color Tools
Pick a color to see five code formats instantly, then choose a wheel rule to get a matching palette.
- Pick a color to get five codes such as HEX and RGB — click a code to copy it.
- Choose a harmony rule (complementary, analogous, triadic…) to get five matching colors along with a WCAG text-contrast check.
- Example: pick your brand color, choose Complementary and copy as CSS variables to paste straight into your stylesheet.
Palette Choose a rule on the wheel and five matching colors follow
Color vision preview
Saved palettes Saved in this browser only
No saved palettes yet. Press "Save this palette" above to start.
FAQ
Are HSB and HSV different?
They are the same thing. HSB(Hue·Saturation·Brightness) is the name Adobe uses, and
HSV(Value) is another name for the same model; this tool treats them as one. HSL is different — in HSL a pure color sits at L (lightness) 50%, while in HSB it sits at B 100%.
What are the harmony rules based on?
The wheel's Hue angle is what the rules go by. Complementary sits directly opposite the base color (180°), analogous 30° either side, triadic 120° apart and tetradic 90° apart. Monochromatic keeps the hue and varies only saturation and brightness — the same approach as Adobe Color.
How do I read the WCAG contrast score?
It is the luminance ratio between two colors. Body text needs 4.5 or higher (AA); large text and headings need
3.0 or higher to read comfortably. 7.0 or higher is AAA, very crisp. The first palette color is treated as the background and the rest as text.
How accurate is the color vision preview?
It applies the color-vision matrices published by Machado et al. (2009) as-is, so it is an approximation. Color vision deficiency varies from person to person, so it can't reproduce exactly "what they see", but it is good enough to judge
whether the two colors stay distinguishable. Red-green deficiency is the most common, affecting about 5% of Korean men, so always check palettes that put green and red side by side.
Greyscale is the final test: if the colors still differ there, the palette doesn't rely on color alone. The preview only changes what's painted on screen; copied and saved HEX values are always the original colors.
I can't find "pick from screen".
It only appears when your browser supports the EyeDropper API (desktop Chrome, Edge and others). Otherwise the button is hidden — just paste a HEX value instead.
Are saved palettes visible on other devices?
No. This site keeps no data on a server. Saved palettes and your last color are
stored here only — not visible in private windows or on other devices.
Related tools
Copied