Don't like ads? Go Ad-Free Today 

Color Swatch Sheet Generator

ColorDeveloperImage

ADVERTISEMENT · REMOVE?

INPUT

Auto Process

OUTPUT

Client Side

ADVERTISEMENT · REMOVE?

Guide

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.

How to Use

Enter one color per line in the Colors textarea, or click Try an example to load a starter palette.
Adjust Columns, Swatch Size, Gap, and Sheet Padding to match the layout you need.
Pick a sheet background color and toggle whether to show hex labels or matched CSS color names on each swatch.
Choose how labels are colored — Auto uses contrast against each swatch, or force Always Dark or Always Light.
Click Download PNG for a 2x raster export, or Download SVG for a vector file you can open in Figma, Illustrator, or any browser.

Features

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.
Fully client-side — colors never leave the browser, so it is safe for unreleased brand palettes.

 FAQ

What is a hex color code and why are there sometimes 8 characters?

A hex color code uses three pairs of hexadecimal digits to encode the red, green, and blue channels of an sRGB color (for example #FF5733). Each pair ranges from 00 to FF, which is 0 to 255 in decimal. An optional fourth pair encodes alpha (opacity) from 00 (fully transparent) to FF (fully opaque), giving the eight-character form #RRGGBBAA used in modern CSS.
How is contrast between a swatch and its label decided?

Most contrast checks use the WCAG relative luminance formula, which converts each sRGB channel to a linear value, then weights them as 0.2126R + 0.7152G + 0.0722B. Light backgrounds (luminance roughly above 0.5) read better with dark text, and dark backgrounds read better with light text. This is the same calculation behind the WCAG 2 contrast ratio used for accessibility audits.
Why do designers prefer SVG over PNG for color swatches?

SVG stores swatches as vector shapes and text rather than a fixed grid of pixels, so the sheet stays sharp at any size, prints cleanly at high DPI, and remains editable in design tools like Figma or Illustrator. PNG is still useful when you need a single flat raster image for slides, screenshots, or quick sharing where vector support cannot be assumed.
What is the difference between sRGB hex values and the RGB you see in code?

Hex values like #FF5733 and the equivalent rgb(255, 87, 51) describe the same sRGB triplet — hex is just a compact base-16 notation. They both refer to the standard sRGB gamut used on the web. Wider gamut formats such as display-p3 or oklch describe colors outside that gamut and are not interchangeable with the same numbers in sRGB.