PaletteSnapePull a palette out of any picture, build one from a base colour with six harmonies or search 148 named colours; get shades, gradients, a contrast checker and a colour blindness preview, and export as CSS, SCSS, Tailwind, design tokens or PNG. Everything stays in your browser: nothing is uploaded.
or click to choose one, or paste one from the clipboard (JPG, PNG, WebP, GIF, BMP)
The scheme replaces the palette except for locked colours.
The 148 named colours every browser understands. Click one to add it.
Click a colour to copy its hex and see its shades. The lock keeps a colour through Random and Generate scheme; up to ten colours.
Eleven steps from 50 to 950, as a design system would name them. Click a shade to copy it.
Add at least two colours.
An approximation of how the palette reads with each kind of colour vision. Colours that merge here are hard to tell apart.
Large text at 24 px
Normal text at 16 px: the quick brown fox jumps over the lazy dog.
Pick any palette colour for the text or the background with the buttons on its card. Large text means about 24 px, or 19 px bold.
Up to 50 palettes, kept in this browser. Export writes them to a file; Import adds a file's palettes.
Shortcuts when no field has the focus: R random palette, S save, E export as CSS, Esc close a window; Ctrl+V anywhere pastes a picture.
Drop a photo, screenshot or logo on the Picture panel, click it to choose a file, or paste a picture from the clipboard anywhere on the page. The tool reads it in your browser, counts its colours and fills the palette with the six most dominant ones. Choose four to ten and press Extract again to re-count.
On the Base colour panel, pick a colour or type its hex and Add to palette, or choose a harmony (complementary, analogous, triadic, split-complementary, tetradic, monochromatic) and Generate scheme to build a whole palette around it. Named colours finds any of the 148 CSS colour names by name or hex.
Each colour card shows the hex, the nearest named colour, the RGB and HSL values, and buttons to lock, copy, use as text or background in the contrast checker, and remove. Lock the colours you like, then press Random palette or Generate scheme and only the unlocked ones change. Up to ten colours.
Click a colour and the Shades card lays out eleven steps from 50 to 950, each copied with a click. The Gradient card draws the palette as a linear gradient at any angle, a radial or a conic one, and copies the CSS line ready to paste.
The Contrast Checker shows text and background together, the contrast ratio, and whether the pair passes AA and AAA for normal and large text. The Colour Blindness Preview shows the palette as people with four kinds of colour vision see it, so two colours that merge there get changed before they reach a chart.
Export copies the palette as CSS variables, SCSS variables, a Tailwind config block or JSON design tokens, or downloads a PNG strip of the swatches with their hex codes. Save palette keeps it in this browser with a name, up to fifty, and the saved list exports to a backup file and imports it again.
A brand's unreleased artwork, a client's photo, a screenshot of something private: the tool reads the picture in your browser, draws it on a hidden canvas to count the colours and never sends it anywhere. Close the page and it is gone. The only things that leave your browser are the files you export yourself.
Extraction returns a picture's dominant colours, kept apart from each other, rather than a bag of near-duplicates. Harmonies keep the base colour's saturation and lightness so the scheme sits together. Locks let you keep what works and shuffle the rest until the palette is right.
A pretty palette that nobody can read is a failed palette. The contrast checker reports the real ratio against all four guideline levels, and the colour blindness preview catches the red and green that look the same to one man in twelve, before the chart ships.
CSS custom properties, SCSS variables, a Tailwind colours block and JSON tokens with hex, RGB and HSL, each copied in one click and each named consistently, plus a PNG strip for a slide or a brief. No sign-up wall in front of the export button.
Extraction takes a fraction of a second because the picture is shrunk first and nothing crosses the network. The cards stack on a phone, the pickers use the device's own colour chooser, and both themes keep the swatches true.
Saved palettes live in your browser with their names and dates, and export to one plain file that imports anywhere. No account to lose, no plan to lapse, no palette held hostage.
Colours sit on a wheel by hue. Complementary pairs the base with the colour opposite it, the strongest contrast of hue. Analogous takes the neighbours 30 and 60 degrees away on each side, the quietest. Triadic spaces three colours 120 degrees apart; split-complementary softens the complement by taking the two colours beside it; tetradic takes four at right angles. Monochromatic keeps the hue and changes only the lightness, which is how most interfaces are actually coloured: one hue, many tints.
The ratio compares the relative luminance of two colours on a scale from 1:1 to 21:1. The web accessibility guidelines ask for 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at level AAA. Hue barely matters; lightness is everything, which is why a mid-blue on a mid-red fails even though they look different. A tint from the Shades card at 100 against one at 800 nearly always passes.
About one man in twelve and one woman in two hundred has a form of colour blindness, most often the red-green kind (protanopia and deuteranopia). Tritanopia, the blue-yellow kind, is rare, and achromatopsia, seeing no colour at all, rarer still. The preview applies a fixed mix of the channels for each, an approximation of the full form. The practical rule: never let colour be the only difference between two things that matter, and check that the lightness differs too.
It shrinks the picture to about a hundred pixels on its longer side, rounds every pixel's red, green and blue to one of 32 steps, counts how often each rounded colour occurs, and walks the list from the most common down, keeping a colour only if it is clearly different from the ones already kept. If that yields fewer colours than you asked for, the difference it demands is relaxed and the walk repeated. The result is the picture's dominant colours, not every colour in it; a photo of a sunset gives oranges and blues, not the one green pixel in the corner.
Ways of picking colours by their position on the colour wheel. Complementary takes the colour opposite the base (180 degrees away). Analogous takes the neighbours at 30 and 60 degrees on both sides. Triadic takes the two colours 120 degrees away. Split-complementary takes the two either side of the complement, at 150 and 210 degrees. Tetradic takes three more at 90-degree steps. Monochromatic keeps the hue and changes only the lightness. Each one keeps the base colour's saturation and lightness, so the results sit together.
The contrast ratio compares the relative luminance of the text colour and the background, from 1:1 (the same colour) to 21:1 (black on white). The web accessibility guidelines ask for at least 4.5:1 for normal text at level AA and 7:1 at level AAA; large text, meaning about 24 pixels and up or 19 pixels bold, needs 3:1 for AA and 4.5:1 for AAA. The checker shows all four so you can see at a glance where a pair stands.
It is an approximation. Each kind of colour vision is simulated with a fixed matrix that mixes the red, green and blue channels the way a missing cone type would, and achromatopsia is shown as grey by luminance. Real colour vision varies from person to person and most colour-blind people have a partial form, so treat the preview as a warning that two colours may be hard to tell apart, not as a measurement.
Nowhere. A picture is read in your browser, drawn on a hidden canvas to count its colours and never sent anywhere; close the page and it is gone. Saved palettes are kept in your browser's storage on this device under the tool's own name, with a backup file you can export and import. There is no account and no server.
It is free, with no registration and no limits. Like every page on ZeroDataUpload, it is supported by advertising.