PaletteSnape Help Documentation

A complete guide to the colour palette extractor and generator, from the first picture to the exported code.

Last Updated: October 7, 2026

1. Getting Started

1.1 What you need

• A modern browser (Chrome, Edge, Firefox, Safari or Opera) with JavaScript enabled, on a computer, tablet or phone
• Site data allowed for zerodataupload.com, so your saved palettes are kept between visits
• A picture, a colour in mind, or nothing at all: Random palette starts from scratch

1.2 The layout

The tool is one page. The toolbar shows a status pill with the palette's size and name on the left and Random palette, Save palette and Clear on the right. Below it: the Colour Source card with its three panels (Picture, Base colour, Named colours) beside the Export card; the Current Palette card with a colour card per colour; the Shades, Gradient and Colour Blindness Preview cards; and the Contrast Checker beside Saved Palettes. On a tablet or phone the cards stack one above the other.

2. Colours from a Picture

• Give it a picture: drop one on the dashed zone, click the zone to choose a file, or paste a picture from the clipboard anywhere on the page (Ctrl+V or Cmd+V). JPG, PNG, WebP, GIF, BMP and, in most browsers, AVIF and SVG work, up to 30 MB.
• Read the result: the picture appears with its size, and the palette fills with its six dominant colours.
• Change the count: choose 4, 5, 6, 8 or 10 colours; the palette is re-counted at once. Extract again re-counts with the same picture, which matters after locking colours (section 5).
• Remove picture clears the preview and goes back to the drop zone; the palette stays.

How the count works: the picture is shrunk to about 120 pixels on its longer side, every pixel's red, green and blue is rounded to one of 32 steps, the rounded colours are counted, and the list is walked from the most common down, keeping a colour only when it is clearly different from the ones already kept. If too few qualify, the difference demanded is relaxed and the walk repeated. Transparent pixels are skipped.

3. Colours from a Base Colour

• Pick the base: the colour well opens the browser's own picker; the field beside it takes a hex such as #8B5CF6 (three-digit forms like #F0A work too). The two follow each other.
• Add to palette adds that one colour.
• Generate scheme builds a palette from the base with the chosen harmony: complementary (the opposite hue), analogous (neighbours at 30 and 60 degrees each side), triadic (120 degrees apart), split-complementary (150 and 210 degrees), tetradic (90-degree steps) or monochromatic (the same hue at four other lightnesses). The base colour's saturation and lightness are kept. Locked colours stay (section 5).

4. Named Colours

Type part of a name or a hex into the search box. Every match among the 148 CSS colour names appears as a chip with its swatch and hex; a hex shows that colour with its nearest name. Click a chip to add the colour to the palette. The search returns up to 24 chips.

5. The Palette

• The card: the swatch with the hex, the nearest named colour ("(near)" when not exact), the RGB and HSL values, and five buttons.
• Click the swatch: copies the hex and shows the colour's shades (section 6).
• Lock: a locked colour survives Random palette, Generate scheme and Extract again; only the unlocked ones are replaced. The toolbar pill counts the locked colours.
• Copy: the hex. Text and Background: send the colour to the contrast checker (section 8). Remove: takes the colour out.
• Limits: ten colours; a colour already in the palette is not added twice.
• Random palette (toolbar or the key R): a random base colour and a random harmony, keeping locked colours. Clear empties the palette. Save palette: see section 11.

6. Shades

Click a palette colour and the Shades card shows eleven steps from 50 (lightest) to 950 (darkest), made by keeping the hue and saturation and setting the lightness to 96, 91, 82, 71, 60, 50, 41, 33, 25, 16 and 9 percent. The step nearest the colour's own lightness is the colour itself and carries a dot. Click any shade to copy its hex. The labels follow the naming design systems use, so a 100 and an 800 from the same colour make a safe pair for text on a background.

7. Gradients

The Gradient card draws the palette's colours in order as a linear gradient at the angle on the slider (0 to 360 degrees), a radial gradient from the centre, or a conic gradient starting at the slider's angle. The CSS line under the preview is the exact value; Copy the CSS puts it on the clipboard. It needs at least two colours.

8. The Contrast Checker

• The colours: a text colour and a background, each with a picker and a hex field; the swap button exchanges them; the text and background buttons on a palette card send that colour here.
• The preview: a line of large text and a line of normal text in the two colours.
• The ratio: the contrast ratio from 1:1 to 21:1, and four pills: AA normal text needs 4.5:1, AAA normal 7:1, AA large 3:1, AAA large 4.5:1. Large text means about 24 pixels, or 19 pixels bold.

9. The Colour Blindness Preview

Five strips show the palette as seen with normal vision, protanopia (red-blind, about 1% of men), deuteranopia (green-blind, about 6% of men), tritanopia (blue-blind, rare) and achromatopsia (no colour, very rare). Each is a fixed mix of the red, green and blue channels, an approximation of the full form of each condition. Hover a swatch for the simulated hex. Two colours that look alike in a strip will be hard to tell apart for those readers; change one, or make sure their lightness differs.

10. Export

• CSS variables: a :root block with --color-1 to --color-n.
• SCSS variables: $color-1 to $color-n.
• Tailwind config: a colours block for theme.extend with palette-1 to palette-n.
• Design tokens: JSON with each colour's hex, nearest name, RGB and HSL.
• PNG swatches: a downloaded strip of the colours with their hex codes and names, 240 pixels per colour.

The four code formats open in a window with Copy and Download file; the key E opens the CSS one.

11. Saved Palettes

• Save palette (toolbar, the key S, or Enter in the name field) keeps the current palette with the name from the field (or "Untitled palette") and the date, newest first, up to fifty. The same palette under the same name is not saved twice.
• Load: click the strip or the folder button; the palette and its name come back. Delete: the bin. Delete all asks first.
• Export saved writes every saved palette to one file; Import adds a file's palettes, skipping exact duplicates.

12. Keyboard Shortcuts

• R: random palette
• S: save the palette
• E: export as CSS variables
• Ctrl+V or Cmd+V: paste a picture from the clipboard
• Enter: in the hex field, add the colour; in the name field, save
• Esc: close a window

The letter shortcuts work only when no field has the focus and no window is open. The theme follows the site: the moon button at the top right of every page switches it.

13. What Is Remembered

One entry in the browser's storage under the tool's own name holds the saved palettes (name, colours, date). It is written when a palette is saved, deleted or imported, and every value is checked when it is read. The current palette, the picture and the checker's colours are not stored; they start fresh on each visit. If the earlier version of PaletteSnape left its saved palettes in this browser under its old name, they are read once on the first visit, checked, carried over and the old copies removed.

14. Troubleshooting

• The extracted colours are all alike: the picture is mostly one colour. Ask for more colours (the tool then relaxes how different they must be) or remove the dominant one and extract again with the rest locked.
• A white or black colour comes first: the background is the largest area of the picture. Remove it with the cross.
• Pasting does nothing: copy the picture itself, not a link, and paste with no field focused; most phones cannot paste pictures into a page, so choose the file.
• Copy fails: the page falls back to an older method and, failing that, tells you to copy by hand; the export window's Download file needs no clipboard.
• The hex field refuses a value: it takes #RRGGBB or #RGB, with or without the hash.
• Saved palettes vanished: site data was cleared, or this is a private window or another browser. Only an exported file brings them back.