Color picker from image
Add a photo and click a spot to read its color. You can also type a code or use the color box without a photo.
Your files and text are not uploaded. Everything happens on this page.
White text reads better on this color.
WCAG for normal text: AA is 4.5 or more, AAA is 7 or more.
Opposite on the color wheel. The strongest contrast.
Tap a color to copy it. Double-tap to make it your color.
If two colors look the same on the right, do not rely on color alone to tell them apart. This is an approximation.
Source, checked October 19, 2026: W3C WCAG 2.2 (1.4.3, 1.4.6)
How to use it
- Add a photo, or skip this step and type a HEX code instead.
- Click or drag over the photo, or tap one of the main colors.
- Copy the code, a matching color or a shade scale for CSS.
Questions
Which color formats can I copy?
HEX (like #4c2fe7), RGB and HSL. The shade scale from 50 to 950 can also be copied as CSS variables, Tailwind colors, SCSS variables or JSON.
How are the main colors chosen?
Similar colors are grouped and the groups covering the most pixels are listed with their share of the picture. Very small groups are left out.
What do the contrast labels mean?
They follow WCAG for normal text: AA needs a ratio of 4.5 or more and AAA needs 7 or more. Large text is allowed 3 for AA and 4.5 for AAA.
Is my photo sent anywhere to read its colors?
No. The photo is read on this page and stays on your device.
More tools
