Colour & Accessibility
Upload a photo, screenshot or artwork, rank the dominant colours and copy the HEX, RGB or HSL value you actually need.
Result
Choose an image to begin.
Use the order
Results are ranked by sampled dominance. Use the top few colours for a quick brand or mood read; use the lower-ranked colours when you are looking for accents rather than the background mass.
Where to paste it
HEX is the easiest handoff to Figma, Canva and most web design controls. RGB is useful in CSS and image workflows. “Copy CSS variables” gives you a ready-made palette block for code.
What next?
One annoying job
You should not have to open a design app, drag an eyedropper around and guess which shade is really doing the most work.
Start with the real photo, screenshot or artwork rather than a compressed copy if you have it.
Top 6 or 8 with balanced grouping is the useful default. Broader grouping is better when tiny colour variations are cluttering the result.
HEX is the easiest handoff to Figma, Canva and most web controls. Use RGB or HSL only when the next tool specifically expects it.
Quick rule: the first colours explain the overall look; the lower-ranked colours are more useful when you are hunting for accents.
Useful to know
Colour tools turn visual choices into measurable values such as contrast ratios or colour coordinates. That makes them useful checks, not automatic design decisions.
A passing number cannot judge hierarchy, glare, display calibration, print stock or whether the surrounding design is actually readable.
Use the number as a signal, then look at the real text size, weight, background and surrounding colours.
Check the real size and context after the number passes. Small text and thin weights usually need more breathing room than the minimum.