/
Book a consultation

Tools

Color Palette Generator

Generate a complete 10-step color palette from a base color. Export as CSS variables or Tailwind config.

50

#faf9f4

100

#f6f2e4

200

#f1e6c6

300

#ffde7a

400

#ffcf3d

500

#FFBF00

600

#d6a100

700

#ad8200

800

#856300

900

#5c4500

Export

--color-50: #faf9f4;
--color-100: #f6f2e4;
--color-200: #f1e6c6;
--color-300: #ffde7a;
--color-400: #ffcf3d;
--color-500: #FFBF00;
--color-600: #d6a100;
--color-700: #ad8200;
--color-800: #856300;
--color-900: #5c4500;

How the 10-step scale is structured

50–200: Light tints

The upper steps produce light tints suitable for backgrounds, hover states and subtle colour areas. Low saturation, high lightness.

300–500: Mid-range

Step 500 is the base colour. 300 and 400 are slightly lighter and commonly used for interactive elements, icons and accents.

600–900: Dark shades

The lower steps provide high-contrast shades for text, buttons and dark-mode surfaces. Higher saturation, deep lightness.

CSS custom properties or Tailwind config — which fits when?

CSS custom properties

Ideal for projects without a build step, vanilla CSS, and stylesheets in WordPress or Shopify themes. All steps are accessible directly via var(--color-500).

Tailwind configuration

Add under colors.brand in tailwind.config.js. This makes utility classes like bg-brand-500 or text-brand-700 available directly in markup.

Combining both

In larger design systems, using both is recommended: CSS custom properties for global tokens, Tailwind config for utility classes. This keeps the system flexible and maintainable.

A consistent colour system is the foundation of a recognisable brand and a maintainable design system. This tool takes a single base colour and generates a complete 10-step palette — from near-white tints to near-black shades — using perceptual colour mixing for natural-looking results. Export as CSS custom properties (--color-50 through --color-900) ready for a global stylesheet, or as a Tailwind CSS configuration object for immediate use. Useful for new design systems, brand colour implementations and component library setups.

Frequently asked questions

What is a 10-step colour scale?+
A 10-step colour scale (50 to 900) is a standardised colour palette system popularised by Tailwind CSS. Step 500 is the base colour. Lower steps (50–400) are lighter tints, higher steps (600–900) are darker shades. This system enables consistent colour use across a design system.
What is the difference between CSS custom properties and Tailwind?+
CSS custom properties (also called CSS variables) are native browser features that work in any stylesheet. Tailwind config entries are converted into utility classes during the build step. CSS properties are universal; Tailwind config only makes sense in Tailwind projects.
Can I use the generated colours directly?+
The generated colours are a good starting point but should be checked against WCAG contrast requirements. Use our Colour Contrast Checker to ensure text on the chosen background colours meets the minimum 4.5:1 contrast ratio (AA).
Why are some colour steps generated differently than expected?+
The palette is calculated using HSL colour mixing (hue, saturation, lightness). With very desaturated base colours (greys, pastels), the result may appear less vibrant than saturated colours. This is by design and reflects actual browser behaviour.
How many colours does a design system need?+
A solid design system typically needs: 1–2 brand colours (each with a full 10-step palette), 1 neutral palette (greys), and optional semantic colours (success, warning, error, info). This amounts to 3–5 palettes with 10 steps each — 30–50 tokens in total.

This tool provides an automated analysis for orientation purposes only. Results may be incomplete or inaccurate. This does not constitute legal, technical, or professional advice of any kind. NEXITO MEDIA LLC accepts no liability for decisions made based on tool results.

Back to all tools