Color Palette & Contrast Checker

What this tool is actually doing, and why it's worth checking

Three separate things happen on this page — reading a single color, pulling a palette out of a whole image, and checking whether two colors are actually legible together — and they're useful for pretty different reasons.

Reading colors, pixel by pixel

Moving over the image reads the exact color under your cursor straight off the canvas it's drawn on, and shows it as hex, RGB, and HSL at once so you can copy whichever format you need. Clicking pins a color to the "Picked colors" list below, so you can grab a few from different parts of an image without losing the first one. In Chrome and Edge, the "Pick a color from anywhere on your screen" button goes further — it uses the browser's own screen-wide eyedropper, so you can sample a color from any window on your screen, not just the image you dropped in.

Pulling a palette out of an image

The "Dominant palette" samples colors across the whole image and groups similar ones together, so what's left is roughly the handful of colors that actually define it — not a literal top-6-by-pixel-count, which tends to get dominated by near-identical shades of one color. It's meant for pulling a usable starting palette out of a photo, screenshot, or reference image without eyeballing hex codes by hand. "Copy as CSS variables" turns whatever it finds straight into a :root { --palette-1: ...; } block you can paste into a stylesheet.

Why the contrast checker matters

WCAG (the standard everyone means when they say "web accessibility guidelines") sets a minimum contrast ratio between text and its background, because low-contrast text is genuinely hard to read for people with low vision or color blindness — and honestly for everyone else too, in bright sunlight or on a cheap screen. The checker computes the real ratio between any two colors and shows whether it clears the standard thresholds: AA (the common baseline most sites are expected to meet — 4.5:1 for normal text, 3:1 for large text) and the stricter AAA. It matters because contrast is deceptive to the eye — a color pairing that looks fine on a nice monitor can still fail the actual ratio, and it's one of the most common accessibility issues on real sites precisely because it's so easy to miss just by looking.

A few ways people actually use this

• Matching a hex code to a color in a screenshot or mockup without opening a design tool.
• Pulling a starting palette from a logo, photo, or reference image for a new design.
• Checking a text/background color pairing meets accessibility contrast requirements before it ships.
• Sampling a color from anywhere on screen — another app, a PDF, a video frame — with the eyedropper, not just from an uploaded image.