Why colour matters on thumbnails
Feeds are visually crowded. A thumbnail that uses a colour its neighbours don’t — or a strong light–dark contrast — gets noticed before anyone reads a word. Studying the palettes of top videos in your niche shows you which colours are overused (and therefore easy to stand out from) and which ones your audience already associates with quality.
How the colour extractor works
The tool shrinks your image to about 120 pixels wide and groups similar pixels using k-means clustering. Each swatch is the average colour of one group, and the percentage shows how much of the image it covers. Everything happens on your device — the image is never uploaded.
To analyse a video that’s already on YouTube, paste its link. The tool loads the public thumbnail and extracts its colours. Click any swatch to copy its HEX code for Photoshop, Canva, Figma or Photopea.
Understanding contrast ratios
Contrast ratio compares the brightness of two colours, from 1:1 (identical) to 21:1 (black on white). The thresholds come from the Web Content Accessibility Guidelines (WCAG) and are a good yardstick for thumbnail text:
| Ratio | WCAG level | What it means for thumbnails |
|---|---|---|
| Below 3:1 | Fails | Text will blur into the background on phones. Change colours or add an outline. |
| 3:1 – 4.5:1 | AA large text | Acceptable for very big, heavy letters only. |
| 4.5:1 – 7:1 | AA | Good. Readable in most feeds. |
| 7:1 and above | AAA | Excellent. Holds up even in the sidebar. |
The grayscale test
Turn on Grayscale to strip out colour and see only light and dark values. If your subject and text disappear into the background in grayscale, the thumbnail relies on hue alone — and will look flat to many viewers, including people with colour-vision deficiencies. Strong thumbnails keep their shape in black and white.
Related tools
Frequently asked questions
How do I get the HEX code of a colour in a thumbnail?
Upload the image or paste a YouTube link, then click a swatch. The HEX code is copied to your clipboard.
What is a good contrast ratio for thumbnail text?
Aim for at least 4.5:1. If your text is very large and bold, 3:1 can work, but 7:1 or higher reads best on small screens.
Why do the colours differ slightly from my editor?
The extractor averages groups of similar pixels, so each swatch represents a family of shades rather than one exact pixel.
Can I extract colours from any image, not just thumbnails?
Yes. Any JPG, PNG, WebP, GIF or BMP works.