Pantone-Style Color Cards

What this tool does

This tool turns any set of colours into a row of clean, Pantone-style swatch cards. Each card uses the format graphic designers know well: a large block of solid colour on top, then a white strip below carrying the colour’s name and its numeric values in HEX, RGB and CMYK. You build the set yourself — add, remove and edit colours, give each one an optional custom label — and the cards render live in a responsive grid as you work. When the set looks right, a single button exports the whole grid as a PNG image you can drop into a presentation, a brand document or a printed reference sheet. Every value on every card is also one click away from your clipboard.

Use cases

The format is genuinely useful across a lot of design work. Brand guidelines are the obvious one: a brand’s core palette presented as named cards, each with the exact HEX and CMYK values a designer or printer needs, looks professional and removes ambiguity. Web designers building a design system can export a card set as a visual token reference that sits alongside the code. Illustrators and painters use it to lock in a working palette before starting a piece, with each swatch labelled by role — shadow, midtone, highlight. Print and packaging teams get a quick CMYK readout next to each colour to sanity-check before sending artwork to a press. It is equally handy for client presentations, where a tidy grid of named swatches communicates a colour direction far better than a list of hex codes in an email.

How to use it

1. Start from the default starter set, or clear it down and build your own.
2. For each colour, click the colour picker to choose a shade, or type a HEX value directly into the hex field — the two stay in sync.
3. Add an optional label for each card, such as the colour’s brand name or its role in your palette.
4. Use Add colour to extend the set and Remove to drop a card you do not need.
5. Watch the card grid update live; copy any HEX, RGB or CMYK value with its copy button.
6. Click Download as PNG to save the whole grid as an image.

Tips

Keep labels short — one or two words read best on a card and in the export. Group related colours next to each other (all the neutrals together, the accent colours together) so the exported grid tells a clear story. If you are preparing for print, treat the CMYK figures as a guide and always confirm with a physical proof, because process printing cannot reproduce every screen colour exactly. For a brand palette, name every card explicitly rather than leaving hex codes as titles; named swatches are far easier for the rest of a team to talk about. Finally, the PNG is rendered at a generous resolution, so it holds up well even when projected or printed at A4.

Related techniques

A Pantone-style card set pairs naturally with other colour work. Use a colour converter when you need a value in a space the card does not show, such as HSL or OKLCH. A palette generator helps you discover a harmonious set of colours before you commit them to cards. A contrast checker confirms that any colour you plan to use behind text meets accessibility thresholds. Once a palette is finalised here, the exported PNG becomes a stable reference you can attach to briefs, embed in documentation, or hand to a printer — a small, self-contained artefact that keeps everyone working from the same colours.