Provix
+Become a Client

Free Design tool

Colour palettegenerator

Turn a single brand colour into a full 50–950 scale with harmonies and WCAG contrast checks. Export as CSS variables, Tailwind or SCSS in one click.

11-step tint & shade scaleWCAG AA / AAA checksTailwind, CSS & SCSS export
Scheme

Your palette

Click any swatch to copy its HEX

primary

secondary

neutral

WCAG contrast checker

Large heading text

Normal body text should be easy to read for everyone.

9.25:1✓ Normal text AA✓ Normal text AAA✓ Large text AA✓ Large text AAA✓ UI components
Tailwind v4
@import "tailwindcss";

@theme {
  --color-primary-50: #f7f5ff;
  --color-primary-100: #edeaff;
  --color-primary-200: #dbd4ff;
  --color-primary-300: #c6b8ff;
  --color-primary-400: #a98fff;
  --color-primary-500: #8b5cf6;
  --color-primary-600: #7b49e3;
  --color-primary-700: #6434bf;
  --color-primary-800: #50279b;
  --color-primary-900: #3e1d7c;
  --color-primary-950: #290e57;

  --color-secondary-50: #f7f9e5;
  --color-secondary-100: #edf1c8;
  --color-secondary-200: #dbe295;
  --color-secondary-300: #c6ce49;
  --color-secondary-400: #a7ae00;
  --color-secondary-500: #8b9100;
  --color-secondary-600: #737800;
  --color-secondary-700: #5c6000;
  --color-secondary-800: #494c00;
  --color-secondary-900: #393b00;
  --color-secondary-950: #252700;

  --color-neutral-50: #f7f5ff;
  --color-neutral-100: #edebfa;
  --color-neutral-200: #dbd9e7;
  --color-neutral-300: #c4c2d0;
  --color-neutral-400: #a5a3b0;
  --color-neutral-500: #898795;
  --color-neutral-600: #72707d;
  --color-neutral-700: #5b5965;
  --color-neutral-800: #484652;
  --color-neutral-900: #383642;
  --color-neutral-950: #24222d;
}

How it works

Build a brand palette in 4 steps

  1. 01

    Pick your base colour

    Enter your brand HEX or use the picker. Try random for inspiration.

  2. 02

    Explore harmonies

    Generate complementary, analogous, triadic or split-complementary companion colours.

  3. 03

    Check accessibility

    Every shade shows its contrast against white and black with AA and AAA ratings.

  4. 04

    Export the code

    Copy CSS variables, a Tailwind theme or SCSS straight into your project.

FAQ

Colour questions

Quick answers about using our free Brand Colour Palette Generator.

WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text and UI components. AAA requires 7:1 for normal text.

They follow the Tailwind CSS convention: 50 is the lightest tint, 500 is close to your base colour, and 950 is the darkest shade.

It is the colour directly opposite on the colour wheel. It creates strong contrast and works well for calls to action.

Most brands work well with one primary colour, one or two accents and a neutral scale. Each colour then gets a full tint and shade scale for UI states.

Brand & UI design

Need a design system that scales?

We design and build accessible, consistent product interfaces and design systems for web and mobile apps.

Contact us