Exact HEX/RGB/HSL from any pixel + a dominant palette from the whole image
#2563EB is rgb(37, 99, 235), hsl(221, 83%, 53%), and carries a 5.17 contrast ratio with white text (passes WCAG AA's 4.5 bar, falls short of AAA's 7.0). The palette panel also extracts the image's dominant colors — the quantized color clusters that define its look. The image is processed entirely in your browser; nothing is uploaded.Click or drag an image here (PNG, JPG, WebP, GIF)
| Level | Contrast Ratio | Applies To |
|---|---|---|
| AA | ≥ 4.5:1 | Normal body text |
| AA | ≥ 3.0:1 | Large text (≥ 24px, or ≥ 18.7px bold) and UI components / graphical objects |
| AAA | ≥ 7.0:1 | Normal body text |
| AAA | ≥ 4.5:1 | Large text |
The tool computes (L1 + 0.05) / (L2 + 0.05) from WCAG 2.x relative luminance for your picked color against both white and black, so you can see immediately which text colors pass on it.
| Format | Example | What the numbers mean |
|---|---|---|
| HEX | #2563EB | Three byte pairs in base-16: 25 red, 63 green, EB blue. Shorthand #abc expands to #aabbcc. |
| RGB | rgb(37, 99, 235) | Same bytes in decimal, 0–255 per channel — the raw values stored in every pixel. |
| HSL | hsl(221, 83%, 53%) | Hue 0–360° around the color wheel, saturation 0–100% (distance from gray), lightness 0–100% (0 = black, 100 = white). |
| Alpha | #2563EBCC / rgba(…, 0.8) | Optional 4th channel for transparency; 8-digit HEX uses two hex digits (CC = 204 = 80%). |
The eyedropper is a direct pixel read: your image is drawn to a canvas, and a click maps the cursor position to image coordinates (accounting for any scaling between natural and displayed size) and reads that single pixel's red, green, and blue bytes. HEX is those bytes in base-16, RGB is the same in decimal, and HSL is a polar re-coordination — hue from which channel dominates, saturation from how far it dominates, lightness from the overall magnitude.
One pixel can't speak for a whole photo, so the palette panel runs the image through the color quantizer behind ColorThief (MIT, lokesh/color-thief): it samples the pixels, clusters them in RGB space, and returns the cluster centers ordered by size. The first swatch is the dominant color — the biggest cluster — and the rest are a ready-to-use brand palette: backgrounds, accents, and supporting tones that genuinely appear in the image. Photos with strong subjects produce clean palettes; noisy screenshots produce muted ones.
Take the common UI blue #2563EB. Converting: hex 25 = 37, 63 = 99, EB = 235, so rgb(37, 99, 235). In HSL that's hsl(221, 83%, 53%) — hue 221° because blue dominates, 83% saturation because the channels differ strongly. Its relative luminance works out to 0.1532, giving a contrast ratio against white of (1.0 + 0.05) / (0.1532 + 0.05) = 5.17 — white text on this blue passes AA (4.5) but not AAA (7.0). Against black it's (0.1532 + 0.05) / (0 + 0.05) = 4.06, which fails AA for normal text — so pair this blue with white text, not black. Flip the case to a bright amber like #F59E0B (luminance 0.4389): white text drops to 2.15 (fails everything), black text rises to 9.78 (passes AAA). Bright backgrounds want dark text; the contrast chips under each pick tell you which side you're on.
Load the image, move your cursor over it to preview the color live, and click the pixel you want. The tool reads the exact red, green, and blue values at that pixel from the rendered image and converts them to HEX (#RRGGBB), rgb(), and hsl() — click any value to copy it. Because it samples the actual pixels, it works on screenshots, logos, photos, and scans alike.
The color that best represents the image overall — technically, the largest cluster after the image's colors are quantized into a palette. The dominant color of a product photo is usually the product's main tone; of a website screenshot, the background. The palette shows the dominant color first, then the next-largest clusters, so you get a usable brand scheme rather than one number.
Three common causes: JPEG compression shifts pixel values slightly; antialiasing blends edge pixels between two colors (pick from the middle of a solid area, not an edge); and color profiles (sRGB vs Display P3) render differently across screens. For matching a brand color, sample a large flat area and cross-check 2-3 pixels — they should agree.
The tool computes WCAG 2 contrast ratios for every color you pick: luminance from the sRGB channels, then (L1+0.05)/(L2+0.05). White text on #2563EB, for instance, has a ratio of 5.17 — above the 4.5 AA threshold for normal text but below the 7.0 AAA bar. Dark text on the same blue is 4.06. The thresholds to know: 3.0 for large text and UI components, 4.5 for normal text (AA), 7.0 for normal text (AAA).
Same color, three coordinate systems. HEX (#2563EB) and rgb(37,99,235) are the same numbers in base-16 and base-10 — direct intensity of red, green, and blue. HSL (hue 221, saturation 83%, lightness 53%) is human-shaped: one dial for the color itself, one for vividness, one for brightness, which is why design tools use it for generating tints and shades.