Brand Color Swatch PDF

When a designer hands a brand to a developer, a printer or a new colleague, the colours usually travel as a screenshot or a list in an email, and someone ends up copying values by hand. A one-page swatch sheet with the name, hex, RGB and optionally CMYK of every colour is quicker to read, easy to attach and the same for everyone. This tool builds that sheet from a plain text list and downloads it as a PDF created on your device.

Writing the list

Type one colour per line. A line can be Ocean blue: #0b5ed7, where the text before the colon is the name, or just a colour, in which case the card is named after the value. Short hex such as #abc is expanded to #aabbcc. A line that the tool cannot read produces a warning with its line number, and the rest of the palette is still used. Named CSS colours such as red are not understood, so write them as hex.

A worked example

Press Sample for six colours: Ocean blue #0b5ed7, Coral #ff6b5a, Sand #f4e4c1, Forest #1f6f50, Ink #1a1a2e and Cloud #f5f7fa. With CMYK on, the cards print values rounded to whole numbers: Ocean blue 95, 56, 0, 16; Coral 0, 58, 65, 0; Sand 0, 7, 21, 4; Forest 72, 0, 28, 56; Ink 43, 43, 0, 82; and Cloud 2, 1, 0, 2. On A4 portrait the six cards fit in two columns and three rows on a single page, under the title “Brand colors” and the line “6 colors”. The file is named brand-palette.pdf.

Layout

Each card is a swatch rectangle 80 points tall with a thin grey outline, so very pale colours such as Cloud remain visible against the white page. The name is set in bold, and the values follow in smaller type. Portrait pages use two columns and landscape pages three; the page is filled left to right, and when no room is left a new page begins with the same title. The size toggle chooses between A4 (595 by 842 points) and US Letter (612 by 792 points).

Choosing which values to include

HEX and RGB are always shown because screens use them. Include HSL when the team writes CSS with hsl(). Include CMYK when the sheet will go to a printer, but treat the numbers as a starting point: they use the simple conversion from RGB, as the footnote says, and a printer working with an ICC profile may land on different numbers for the same colour. For production files, get the official values from the brand guidelines or the print proof.

Edge cases

A long colour name wraps inside the width of its card and can run into the value lines beneath it, so keep names short. Changing the document title changes the heading and also the PDF’s metadata title. The preview strip above the button uses black or white text on each swatch depending on its brightness. If you add many colours the sheet continues on the next page without breaking a card.

Limits

There is no logo, custom font, usage guidance or contrast information on the sheet; the accessible palette matrix covers contrast separately. Non-Latin names are replaced by question marks. Nothing is uploaded: the PDF is built in your browser and downloaded directly.

Related tools

• CMYK to HEX Converter explains the conversion behind the CMYK line.
• Accessible Palette Contrast Matrix checks which of your colours can carry text.
• Color Palette Generator suggests colours to add to the list.
• Tailwind Color Scale Generator expands one brand colour into eleven shades.