Color Converter
HEX, RGB, HSL, HSV, CMYK, contrast, shades — plus extract every color from an image.
Text & dev tools
Swatch or type any HEX (#RRGGBB) — everything updates live.
Drop an image here or browse
Logos, photos, screenshots — the palette is extracted locally.
WCAG contrast tells you if text is readable on that background. 4.5:1+ passes normal text, 3:1+ passes large text. The preview panel shows black and white text options side by side.
Color Tool — FAQ
How does the image extraction work?
The image is drawn to an off-screen canvas, every pixel is read and quantized into color buckets, then the buckets are ranked by how much of the image they cover. The top colors become your palette — everything happens in your browser; the image is never uploaded.
When do I use HEX vs RGB vs HSL?
HEX is the compact standard for CSS and design tools. RGB is what canvas and image APIs want. HSL is human-friendly — tweak H for hue, L for lightness — great for building shade scales.
What does "complementary" mean?
The color directly opposite on the color wheel — highest possible hue contrast. Classic pairing for call-to-action buttons on a landing page.
Why does my shade scale look muddy in the middle?
Linear lightness steps pass through desaturated mid-tones for some hues — that's physics, not a bug. Designers call it the "dead zone"; nudge saturation up in the middle steps if it bothers you.
Is CMYK conversion print-accurate?
It's the standard naive formula — good for reference and gradients, but real printing uses device profiles (ICC) that vary per printer. For production print work, convert in your design software.