Color Swatch Image
Turn a list of hex colours into a labelled swatch strip image.
Label text colour is chosen automatically for contrast against each swatch.
What Is This Tool?
This tool takes a list of hex colours (optionally with names) and lays them out as a swatch image — a strip, a stack, or a grid. Each block can be labelled with its hex value in a colour picked automatically for contrast. It is a fast way to share or archive a palette as a single picture.
How It Works
Paste one hex colour per line, optionally with a name after a space.
Choose a layout and overall width.
Click Render.
Click Download swatches.
Everything runs locally in your browser — the image you choose is decoded onto an HTML canvas on your own device and is never uploaded to a server.
Features
- Strip, stack or grid layouts
- Optional per-swatch hex labels
- Automatic label contrast (black or white)
- Accepts 3- or 6-digit hex, with or without #
- Rendered locally
Common Use Cases
- Sharing a brand palette in a chat or doc
- Archiving a colour scheme as an image
- Making a reference sheet for a design system
- Turning extracted colours into a shareable graphic
Frequently Asked Questions
What hex formats are accepted?
Six-digit (#4f46e5), three-digit shorthand (#45e), and values without the leading # all work. Anything unparseable is skipped with a note.
How are label colours chosen?
The tool computes each swatch’s luminance and prints the label in black or white, whichever has more contrast.
Can I set exact block sizes?
You set the overall width; block sizes are derived from that and the number of colours and layout. For pixel-perfect control, use fewer colours or a wider canvas.
Does it extract colours from an image?
No — this tool takes a list you provide. Use Palette from Image or Dominant Color Extractor to get colours out of a photo first.
Is anything uploaded?
No, the swatch image is drawn in your browser.