Logo and Brand Colour Generator

How the palette is built

Every palette has five roles:

• Primary: your main colour, used for buttons, links and key shapes.
• Secondary and Accent: supporting colours chosen by the harmony rule.
• Dark: a deep, low-saturation version of your hue, for text.
• Light: a pale version of your hue, for backgrounds.

The harmony rule decides the secondary and accent hues. Complementary adds the colour opposite yours on the colour wheel (180°). Analogous adds neighbours 30° either side. Triadic adds two colours a third of the way round (120° apart). Split-complementary takes the two colours either side of the opposite one (150° and 210°). Monochrome keeps one hue and changes lightness.

The tool turns the wheel in OKLCH (lightness, chroma, hue) rather than HSL. The CSS Color 4 specification explains that HSL lightness “does not correspond to the visual perception of lightness across hues”, so an HSL yellow and blue at the same “lightness” look very different. In OKLCH, colours at the same lightness look closer in brightness, which makes palettes more balanced. Colours that can’t be shown on a normal screen are brought back into range by reducing their chroma.

Reading the contrast checks

Contrast is calculated with the WCAG 2.2 formula. Each colour’s relative luminance is worked out from its red, green and blue values (L = 0.2126 R + 0.7152 G + 0.0722 B, after converting each channel from sRGB to linear light). The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. It runs from 1:1 (no contrast) to 21:1 (black on white).

Level	Normal text	Large text
AA	4.5:1	3:1
AAA	7:1	4.5:1

Large text means at least 18 point (about 24 px) or 14 point bold (about 18.5 px). The tool never rounds a ratio up, so a pair shown as 4.49:1 fails AA for normal text. Use the “text on each colour” cards to see which text colour works on each background, and use pairs that only pass for large text for headings and big buttons, not paragraphs.

Choosing fonts

The font pairings are well-known combinations from Google Fonts, all under open licences. Several are families designed to work together, such as Source Serif 4 with Source Sans 3, or IBM Plex Sans with IBM Plex Serif. Others contrast a characterful heading font with a plain, readable body font. We don’t load the fonts on this page, which keeps it private and fast; the previews use your device’s generic fonts, so open each font’s page to see the real thing.

Exporting your kit

• CSS custom properties such as --brand-primary drop straight into a stylesheet.
• JSON holds every colour format, the fonts and the contrast results for developers and design tools.
• PNG and SVG palette images are handy for briefs and social posts.
• The Markdown brand kit summarises colours, contrast and fonts in a document you can share.

From palette to brand

A palette and a font pair are the start of a brand, not the end. A designer can turn them into a distinctive logo, choose imagery and write guidelines so everything looks consistent. When your colours are settled, make matching icons with the favicon generator, an email signature and correctly sized social media images. For a complete identity, see our branding and design service.