What format should the colour codes be in?

Enter standard 6-digit hexadecimal colour codes, one per line, with or without the leading # symbol. For example: #FF5733 or FF5733.

How many colours can I add?

There is no fixed limit. In practice, very long lists may produce images that are too wide or tall for easy viewing. The tool works best with 2–20 colours.

Can I change the orientation of the swatches?

Yes. You can toggle between a horizontal strip (colours side by side) and a vertical stack (colours stacked top to bottom) using the layout selector.

Color Swatch Generator

Input a list of hex colours and generate a swatch image strip with HEX labels. Download as PNG.

Hex colours (one per line, with or without #)

5 valid colours detected

Layout:HorizontalVertical

Related Tools

#cImage Gradient Generator

Generate a gradient image of any size with custom colours and direction. Download as PNG.

nseImage Noise Generator

Generate random noise images of any size. Choose grayscale or colour noise. Download as PNG.

#cColor Format Converter

Convert colors between HEX, RGB, and HSL formats with a live preview swatch.

FAQ

What format should the colour codes be in?: Enter standard 6-digit hexadecimal colour codes, one per line, with or without the leading # symbol. For example: #FF5733 or FF5733.
How many colours can I add?: There is no fixed limit. In practice, very long lists may produce images that are too wide or tall for easy viewing. The tool works best with 2–20 colours.
Can I change the orientation of the swatches?: Yes. You can toggle between a horizontal strip (colours side by side) and a vertical stack (colours stacked top to bottom) using the layout selector.

The Color Swatch Generator takes a list of hexadecimal colour codes (one per line) and renders them as a row or column of labelled colour blocks on an HTML Canvas. Each swatch displays the colour fill and its HEX code as a text label. Choose between a horizontal strip or a vertical stack, and configure the block size. Download the resulting swatch image as PNG — ideal for style guides, brand palettes, and design documentation.