Color Swatch Sheet Generator

Color Swatch Sheet Generator

Paste a list of colors and instantly preview them as a printable swatch sheet with hex labels. Mix any CSS color format you like — short and long hex, rgb(), rgba(), hsl(), hsla(), or named colors such as tomato — then download the sheet as a high resolution PNG or scalable SVG for handoff, print, or design system documentation.

Nutzung

1. Enter one color per line in the Farben textarea, or click Probieren Sie ein Beispiel aus to load a starter palette.
2. Passen Sie Spalten, Swatch Size, Gapund Sheet Padding to match the layout you need.
3. Pick a sheet background color and toggle whether to show hex labels or matched CSS color names on each swatch.
4. Choose how labels are colored — Automatisch uses contrast against each swatch, or force Always Dark oder Always Light.
5. Klicken Sie auf PNG herunterladen for a 2x raster export, or SVG herunterladen for a vector file you can open in Figma, Illustrator, or any browser.

Funktionen

• Multi-format input — accepts hex (#abc, #aabbcc, #aabbccdd), rgb(), rgba(), hsl(), hsla(), and CSS named colors in the same list.
• Live SVG preview — the sheet rebuilds as you type, so layout changes are instant.
• Configurable grid — control columns, swatch width and height, gap, padding, and corner radius.
• Smart labels — show hex codes, automatically detect matching CSS color names, and choose contrast or fixed label colors.
• Transparent colors — swatches with alpha render over a checker pattern so opacity is visually obvious in exports.
• Two export formats — high-DPI PNG via Canvas, plus a copyable SVG for vector use.
• Vollständig clientseitig — colors never leave the browser, so it is safe for unreleased brand palettes.