Skip to content
NPTeckz

Brand Color Palette Generator

Build a harmonious brand colour system with light and dark UI roles, WCAG contrast checks with fixes, and CSS, JSON or PNG export.

Your existing brand colour, or any colour you like

Palette

  • Primary

  • Secondary

  • Accent

  • Dark neutral

  • Light neutral

Lock the colours you want to keep, then shuffle. Editing a colour locks it automatically.

Light theme

Your headline here

Supporting text shows how secondary copy reads.

Body text with a link inside.

PrimarySecondaryAccent

Dark theme

Your headline here

Supporting text shows how secondary copy reads.

Body text with a link inside.

PrimarySecondaryAccent

Accessibility (WCAG 2.2 contrast)

1 pairing fail

Text needs 4.5:1; buttons, icons and other UI parts need 3:1. Failing brand colours get the nearest passing shade.

Light theme

  • Body text on background

    16.14:1 · needs 4.5:1

    Pass · AAA

  • Secondary text on background

    5.60:1 · needs 4.5:1

    Pass

  • Body text on cards

    17.38:1 · needs 4.5:1

    Pass · AAA

  • Secondary text on cards

    6.03:1 · needs 4.5:1

    Pass

  • Links on background

    5.72:1 · needs 4.5:1

    Pass

  • Links on cards

    6.15:1 · needs 4.5:1

    Pass

  • Button text on primary

    6.15:1 · needs 4.5:1

    Pass

  • Button text on secondary

    6.55:1 · needs 4.5:1

    Pass

  • Text on accent

    7.39:1 · needs 4.5:1

    Pass · AAA

  • Primary vs background (buttons, icons)

    5.72:1 · needs 3:1

    Pass

  • Accent vs background (icons, highlights)

    2.31:1 · needs 3:1

    Fail

Dark theme

  • Body text on background

    17.79:1 · needs 4.5:1

    Pass · AAA

  • Secondary text on background

    8.58:1 · needs 4.5:1

    Pass · AAA

  • Body text on cards

    16.14:1 · needs 4.5:1

    Pass · AAA

  • Secondary text on cards

    7.79:1 · needs 4.5:1

    Pass · AAA

  • Links on background

    5.19:1 · needs 4.5:1

    Pass

  • Links on cards

    4.71:1 · needs 4.5:1

    Pass

  • Button text on primary

    6.15:1 · needs 4.5:1

    Pass

  • Button text on secondary

    6.02:1 · needs 4.5:1

    Pass

  • Text on accent

    7.39:1 · needs 4.5:1

    Pass · AAA

  • Primary vs background (buttons, icons)

    3.11:1 · needs 3:1

    Pass

  • Accent vs background (icons, highlights)

    7.70:1 · needs 3:1

    Pass · AAA

Export

How to use it

For founders, designers and developers who need a brand colour system that looks good and stays readable on websites and apps.

  1. 01Enter your brand colour (or any colour you like) and choose a harmony.
  2. 02Shuffle for variations; lock the colours you want to keep. Edit any hex value directly.
  3. 03Check the light and dark previews and the contrast results; apply a suggested shade for anything that fails.
  4. 04Export CSS variables, JSON design tokens or a PNG of the palette.

How results are worked out

  • Colours are generated in OKLCH, a perceptual colour space, so lightness steps look even across hues; out-of-gamut colours are mapped back into sRGB.
  • Harmonies rotate the hue of the secondary and accent colours (e.g. ±30° analogous, 180° complementary, 120°/240° triadic).
  • UI roles (background, surface, text, muted text, border, link, button colours) are derived for light and dark themes.
  • Every pairing is checked with the WCAG 2.x contrast formula: 4.5:1 for text, 3:1 for buttons, icons and other UI parts.
  • Text roles are adjusted automatically until they pass; brand colours are never changed without your click.

Limitations

  • Contrast is one part of accessibility — also check font size, focus states and that colour isn't the only way information is shown.
  • Screens and print reproduce colour differently; check physical materials with a printer proof.
  • Shades are suggestions; they aren't checked against existing trademarks.

Questions

What contrast ratio do I need?

WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text and for UI components such as buttons and icons. AAA asks for 7:1 for normal text.

Why does my yellow or light brand colour fail?

Light colours don't contrast enough with white backgrounds or white text. The tool suggests the nearest darker shade of the same hue that passes, so you can keep it for highlights and use the darker shade for text and buttons.

How do I use the CSS export?

Paste the variables into your stylesheet and use them like var(--color-primary). Dark-mode values switch automatically with the visitor's system setting, or with data-theme="dark" on the html element.

Is anything uploaded?

No. The palette is generated in your browser and saved only on this device.

Related free tools

Need it built properly?

This tool is free and stays free. If you'd like NPTeckz to scope or build it for you: