Color Swatch Sheet Generator
Turn a list of hex colors (optionally named) into one combined, scalable SVG swatch sheet — a labelled grid you can copy or download as a single file. Runs entirely in your browser.
Input
One color per line: a hex code (#3bf, #3B82F6, or #3B82F6FF with alpha), optionally prefixed with a name and a colon ("Ocean: #3B82F6"). Blank lines are skipped.
Layout
Labels
Output
Your swatch sheet will appear here.
| Name | Hex | RGB | Text color |
|---|---|---|---|
| No data yet | |||
Guides
What this color swatch sheet generator does
Paste a list of colors — one per line — and it lays them out into a single combined SVG "swatch sheet": a grid of colored tiles, each labelled with its hex value (and optionally its name and RGB value), ready to copy or download as one file. It's built for anything backed by a flat color list: a brand palette, a design token file, a Tailwind config's custom colors, or a moodboard you're turning into a reference sheet. There's no watermark, no account, and no limit on how many times you run it.
How to use it
- Paste your colors into the box, one per line — a hex code (
#3B82F6), optionally prefixed with a name and a colon (Ocean: #3B82F6). Blank lines are skipped, up to 100 colors per run. - Set how many swatches per row, how big each swatch is, and its corner style (square, rounded, or pill).
- Toggle which labels to show on each swatch: hex, RGB, and/or name (when one was given).
- Copy the combined SVG source, or download it as one
.svgfile. - The parsed color list is also shown as a table — hex, RGB, and the readable black/white text color computed for that swatch — which you can copy or download as CSV.
What color formats are accepted?
Hex codes only, in any of the three standard lengths: 3-digit shorthand (#3bf), 6-digit (#3B82F6), and 8-digit with an alpha channel (#3B82F680). Prefix a line with a name and a colon to label that swatch (Ocean: #3B82F6) — the name is optional, so a plain hex code on its own line works too. rgb(), hsl(), and CSS named colors (tomato, rebeccapurple) aren't parsed; convert them to hex first if that's what you're starting from.
How is the label color chosen?
Automatically, per swatch, using the same relative-luminance math as WCAG Contrast Checker: each swatch gets black or white text, whichever actually reads clearly against that specific fill color — so a sheet mixing very light and very dark colors stays legible throughout without any manual per-swatch adjustment.
Is there a limit on how many colors I can put in one sheet?
Yes — 100 colors per run, so the combined SVG stays a manageable size to preview, copy and download. For a larger palette, split it across multiple runs.
Is my data private?
Yes. The sheet is generated entirely in your browser — nothing you paste in is uploaded, logged or sent anywhere. You can disconnect from the internet and this tool still works.
Why SVG instead of a PNG?
An SVG swatch sheet scales losslessly to any size — zoom in, print it large, or drop it straight into a design tool — without the blurring or resampling a raster export gets at larger sizes. Every color tile is a plain <rect> and every label a plain <text> element, so the file stays small and easy to hand-edit if you ever need to tweak it outside this tool.