Generator
Color swatch generator.
Build a palette from hex codes, a pasted list or a photo, then download every color as a swatch: PNG and SVG files, one printable sheet, CSS variables, a Tailwind theme or JSON. Shopify mode gives you the values Shopify's own swatches use.
Paste a list
Hex with or without #, rgb(), hsl(), CSS color names, CSS custom properties, a Tailwind @theme block or a JSON array. A name written beside a color is kept.
Colors from a photo
The tool reads the photo here in the page to find its main colors. It does not upload the photo.
Found in the photo
Tints, shades and harmonies
Your palette (6 colors)
Contrast is the WCAG ratio between the color and white or black text: AA needs 4.5:1, AAA 7:1, large text 3:1.
White 11.48:1 AAABlack 1.82:1 Fail
White 2.08:1 FailBlack 10.08:1 AAA
White 2.35:1 FailBlack 8.9:1 AAA
White 2.06:1 FailBlack 10.17:1 AAA
White 9.9:1 AAABlack 2.12:1 Fail
White 1.2:1 FailBlack 17.39:1 AAA
The palette is empty. Add a color, paste a list or pull colors from a photo.
Swatch preview
Scaled to fit. Files export at 256 px per swatch.
Download
The ZIP holds every swatch as PNG and SVG, the sheet, and the palette as CSS, Tailwind, JSON and a hex list. Each row above also has its own PNG and SVG.
Code
Shopify mode
Shopify's swatches read each color from an entry of the product's Color category metafield. Paste the value below into the entry's
color field. Shopify's color fields hold a hexadecimal code written like #fff123, which is
the form shown here.
| Color | Value for Shopify | Copy |
|---|---|---|
| Navy | #1f3a5f | |
| Dusty rose | #d8a7b1 | |
| Sage | #9caf88 | |
| Mustard | #e1ad01 | |
| Charcoal | #36454f | |
| Cream | #f3e9d2 |
Prints, patterns and Multicolor
A color entry can carry an image as well as a color, and themes often show the image first. For a print, check or texture, turn off "Show name and hex", download that swatch as PNG, upload it in your admin's Files page and pick it as the entry's image. Shopify's Multicolor color has no hex code of its own, so it needs an image to show as a swatch.
Image size: any square PNG works; 200 px is plenty. That is our recommendation, not a Shopify rule: Shopify's help pages give no pixel size for swatch images.
Swatches only appear on options connected to the Color category metafield, on a theme that supports them. Set up color swatches on your theme.
Your palette and options are written into the page address, so a bookmark or a shared link opens the same swatches.
What is a color swatch?
A color swatch is a small sample of one color: a chip, square or circle, usually with its name and code beside it. A palette is the set of swatches that belong together, such as a brand's colors or every shade a T-shirt comes in.
This generator makes both. Each color gets its own swatch file, and the sheet shows the whole palette in order. The codes come along too, so the same colors can go into a website, a design file or a Shopify store without retyping them.
-
Designers
Brand palettes, mood boards and style guides, with the name and hex code under every chip so nobody has to guess.
-
Developers
Design tokens. The CSS variables, Tailwind v4 theme and JSON drop straight into a project, named after your colors.
-
Print
Proof sheets and color references. Screens show light and printers mix ink, so a printed swatch is a close match rather than an exact one.
-
Shopify merchants
Variant swatches on product pages. Shopify mode lists the value for each color entry, and the PNG files work as pattern swatches.
How to use each download.
-
PNG swatches
One file per color at the size you pick, from 64 to 1024 px. With "Show name and hex" off, each file is just the shape on a clear background, ready for a theme, a slide or a Shopify swatch image. Use the PNG button on a row, or the ZIP for every color at once.
-
The swatch sheet
Every color on one image, in palette order, on a light or dark background. Download it as PNG to share or print, or as SVG to edit in Figma, Illustrator or Inkscape.
-
SVG files
Vector swatches stay sharp at any size. Each row's SVG button gives one swatch; the sheet SVG holds them all.
-
CSS variables
Paste the
:rootblock into a stylesheet, then usevar(--color-navy)wherever a color goes. -
Tailwind v4 theme
Paste the
@themeblock into your main CSS file after@import "tailwindcss";. Each color becomes utilities such asbg-navyandtext-navy. -
JSON and a hex list
JSON gives the name, hex,
rgb()andhsl()of each color, for scripts and design token tools. The hex list is one code per line, for anything else.
Shopify mode
Swatches for a Shopify store.
Shopify's own swatches read each color from the product's Color category metafield. Every color entry holds a hex code (Shopify's
example is #fff123), an image, or both, and themes often show the image first. Turn on Shopify mode above for each
color's value, ready to paste.
Swatches only appear on a variant option connected to that metafield, and the theme decides the shape: with a variant picker block, Shopify's help says they show by default, as a circle or a square. Vintage themes need a code edit or an app.
Data and assumptions.
- Color names are the 148 named colors of the W3C CSS Color standard. A suggestion is the closest one by CIELAB color difference, so "Steel blue" means near steel blue, not exactly it.
- Contrast uses the WCAG 2.2 relative luminance formula and is cut, never rounded up, to two decimals. AA needs 4.5:1 for body text and 3:1 for large text; AAA needs 7:1.
- Tints and shades mix the color with white or black in 20% steps. Harmonies turn the hue on the HSL color wheel and keep the saturation and lightness.
- For a photo, the tool scales it down to 160 px, groups its pixels by median cut and keeps the most common groups that look clearly different, so a white background gives one white, not three.
- Colors are sRGB hex values, the form screens, CSS and Shopify use. Print works in CMYK or Pantone, so ask for a proof before a print run.
- Shopify's color fields take a hex code, checked on October 23, 2026. Shopify gives no pixel size for swatch images; the 200 px advice in Shopify mode is ours.
Sources
- Shopify Dev Docs: list of metafield data types
- Shopify Help Center: adding color swatches using category metafields
- Shopify Help Center: Search & Discovery filters
- W3C CSS Color Module Level 4: named colors
- W3C WCAG 2.2: contrast (minimum) and relative luminance
- Tailwind CSS v4 docs: theme variables
Questions about color swatches.
What is the difference between a color swatch and a color palette?
A swatch is one color shown as a sample, usually with its name and code. A palette is a set of colors chosen to work together. This generator builds the palette, then gives you a swatch file for each color in it and a sheet with all of them.
Will my swatches look the same in print as on screen?
Close, but not identical. Screens mix red, green and blue light (the hex codes here are sRGB), while printers mix cyan, magenta, yellow and black ink, and the paper changes the result again. For brand colors in print, ask your printer for a proof or match each color to a Pantone reference, and keep the swatch sheet as the on-screen reference.
How do I make color swatches for a website?
Add your colors, then copy the CSS variables or the Tailwind v4 theme into your stylesheet. For pictures of the swatches, such as on a style guide page, download the PNG or SVG files. Check the contrast line first: a color used for body text needs at least 4.5:1 against its background to meet WCAG AA.
How do I make color swatches for Shopify?
Turn on Shopify mode. For a plain color, paste the value it shows (a hex code such as #fff123) into the color field of the entry in the product's Color category metafield. For a print or pattern, download that swatch as a PNG with labels off and add it as the entry's image. Your theme then shows swatches on options connected to that metafield; the color swatch guides cover each theme.
Which file format should I use for swatches?
PNG for images you upload or share, such as Shopify swatch images, slides and email. SVG when you will edit or resize the swatches in design software. CSS, Tailwind or JSON when the colors go into code. The ZIP holds every one of them.
Where do the color names come from?
Each suggestion is the nearest of the 148 named colors in the CSS standard, such as Navy, Steel blue or Rosy brown. Type over any name to use your own; it goes into the file names, the sheet labels and the CSS variable names.
More free tools.
Setting up swatches on your theme?
The theme guides walk through Shopify's own swatches, apps and code, one theme at a time.