See the colors in your image
Drop a photo, screenshot or logo and get its dominant colors with HEX, RGB, HSL and OKLCH values, a 50–950 scale and WCAG contrast numbers. The file is read in this tab and never uploaded.
or drop it here, or paste from the clipboard
What you get
The image stays in the tab
Your file is decoded with the browser's own canvas, sampled down to 256 px and analysed in memory. There is no upload step, no account and no analytics script on this page.
Contrast you can cite
Every pair in the palette is scored with the WCAG 2.x relative-luminance formula, with AA and AAA marked separately for body text, large text and non-text elements.
Tokens, not screenshots
Copy or download CSS custom properties, a Tailwind v4 @theme block, an SCSS map, JSON or a plain hex list — optionally with a full 50–950 OKLCH ramp.
Extracting a color palette from an image
PalettePeek turns a photo, screenshot, illustration or logo into a working color palette. Drop a file and the browser decodes it, redraws it into a canvas whose longest side is 256 pixels, and groups the remaining pixels into the number of colors you asked for — between four and twelve. Median cut splits the color cube at the weighted median of its widest channel; k-means then nudges those centroids onto colors that really occur in the picture. Turning on "prefer vivid" reweights each pixel by its saturation, so a small saturated sign can outrank a large flat sky. Every color comes back with its share of the image, a nearest everyday name, and HEX, RGB, HSL and OKLCH values you can copy with one click.
A palette is only useful once you know which pairs are readable, so the same colors go straight into an accessibility workbench. The contrast tab scores every combination with the WCAG 2.x formula and paints each cell in the pair it describes, so the number and the thing it measures sit in the same place; the preview tab paints a small interface — navigation, headline, filled button, card, field and alert — with roles you assign yourself. The scale tab builds a Tailwind-shaped 50–950 ramp in OKLCH, holding the hue steady and pulling chroma back only as far as sRGB requires. When the palette is right, export it as CSS custom properties, a Tailwind v4 @theme block, an SCSS map, JSON or a plain list. No image, hex code or export ever leaves your browser.
Guides & articles
How color extraction, contrast ratios and OKLCH scales actually work.
WCAG contrast ratios explained: 4.5:1 and 3:1
Where the contrast formula comes from, which threshold applies where, the exceptions most teams miss, and the honest limits of the WCAG 2.x model.
Extracting a color palette from a photo
Downsampling, median cut, k-means and pixel weighting — what each step does, and how to turn a list of swatches into a usable interface palette.
Building a Tailwind-style 50–950 color scale
Why HSL ramps drift, how an OKLCH ramp keeps its hue, what gamut clamping does to the ends of the scale, and how to sit semantic tokens on top of it.
Frequently asked questions
Is my image uploaded anywhere?
No. The file is read by the browser with the standard File and Canvas APIs, drawn into an off-screen canvas at a maximum of 256 pixels on the longest side, and analysed in memory. PalettePeek has no server component, no upload endpoint and no analytics script, so there is nothing to send your picture to. You can confirm it yourself: open the network tab in developer tools, drop an image, and watch that no request is made.
How many colors should I extract?
Six to eight is the useful range for most photographs: enough to catch the background, the subject and one or two accents without splitting near-identical tones. Go to ten or twelve when the image is busy — a street scene, a packed illustration, a screenshot of a colourful interface. Below six you start losing the accents that make a palette interesting. The slider re-runs the quantizer instantly, so it is cheap to compare.
Why are the colors different from Photoshop or another extractor?
Because quantization is a choice, not a measurement. Different tools downsample to different sizes, use different algorithms (median cut, k-means, octree, popularity), weight pixels differently, and some ignore near-black and near-white entirely. A cluster's average is also not necessarily a pixel that exists in the photo. PalettePeek shows you which method it used and lets you switch between median cut and k-means so you can see the difference for yourself.
What is OKLCH and why use it for the 50–950 scale?
OKLCH is a cylindrical form of the OKLab color space, where L is perceived lightness, C is chroma and H is hue. Unlike HSL, changing L in OKLCH changes how light a color looks rather than how the RGB numbers behave, so a ramp built by stepping L reads as evenly spaced. Hue also stays put: an HSL ramp of a blue drifts purple as it darkens, an OKLCH ramp does not. Every step is checked against sRGB and its chroma reduced only if the color would otherwise fall outside the gamut.
What counts as large text for the 3:1 threshold?
WCAG defines large text as at least 18 point (24 px at the default browser size) for regular weight, or at least 14 point (about 18.66 px) when it is bold. Text that qualifies needs 3:1 for AA and 4.5:1 for AAA; everything else needs 4.5:1 and 7:1. Icons, input borders, focus rings and other non-text elements that carry meaning need 3:1 under success criterion 1.4.11. The contrast panel marks all five thresholds for the pair you select.
Which export formats are available?
CSS custom properties (hex plus an HSL triple for each color), a Tailwind v4 @theme block with OKLCH values, an SCSS map with individual variables, JSON with hex, RGB, HSL, OKLCH, the nearest name and each color's share, and a plain newline-separated hex list. For the three code formats you can append the full 50–950 ramp of the selected color. Everything can be copied to the clipboard or downloaded as a file.
Can I use the tools without an image?
Yes. Choose "No image? Paste hex codes instead" on the start screen and paste up to twelve values in any shape — comma separated, space separated, one per line, or pasted straight out of a CSS file. Three-digit shorthand like #f0c works too. The scale, contrast matrix, UI preview and every export format then behave exactly as they do for an extracted palette.
Is there a limit on image size or format?
Files up to 32 MB are accepted, and any raster format your browser can decode works — PNG, JPEG, WebP, AVIF, GIF and usually SVG. Pixel dimensions do not matter much, because the image is scaled to 256 pixels on its longest side before analysis and then sampled down to at most 40 000 pixels; a 6000-pixel-wide photo and a 600-pixel one take about the same time. Very large files are slower to decode, not to quantize.
Does the page really change color with my palette?
It does. The background wash is painted from your first five colors, and the accent used for buttons, links, focus rings and the three dots in the logo becomes the most vivid color in your palette, lightened or darkened so it still works in whichever theme you are using. Press "Start over" and the page returns to its own violet.