Color System Generator

FREEDeveloper

TOOLColor System Generator

Brand Color

Accepts hex, rgb(), and hsl() formats

Brand Palette

Semantic Colors

success

50500950

warning

50500950

error

50500950

info

50500950

WCAG Accessibility Matrix

Shade	White text on shade	Black text on shade	Shade text on white	Shade text on black
50	✗ Fail1.2	✓ AAA17.6	✗ Fail1.2	✓ AAA17.6
100	✗ Fail1.4	✓ AAA14.7	✗ Fail1.4	✓ AAA14.7
200	✗ Fail1.8	✓ AAA11.5	✗ Fail1.8	✓ AAA11.5
300	✗ Fail2.4	✓ AAA8.6	✗ Fail2.4	✓ AAA8.6
400	✗ Fail3.4	✓ AA6.2	✗ Fail3.4	✓ AA6.2
500	✓ AA5.0	✗ Fail4.2	✓ AA5.0	✗ Fail4.2
600	✓ AAA7.5	✗ Fail2.8	✓ AAA7.5	✗ Fail2.8
700	✓ AAA10.1	✗ Fail2.1	✓ AAA10.1	✗ Fail2.1
800	✓ AAA12.5	✗ Fail1.7	✓ AAA12.5	✗ Fail1.7
900	✓ AAA14.7	✗ Fail1.4	✓ AAA14.7	✗ Fail1.4
950	✓ AAA18.9	✗ Fail1.1	✓ AAA18.9	✗ Fail1.1

AAA (7:1+) AA (4.5:1+)Fail (<4.5:1)

Export

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
    50: '#F8E5FF',
    100: '#EECCFF',
    200: '#DEACFF',
    300: '#C28EFF',
    400: '#A46CFF',
    500: '#8445F7',
    600: '#6C1ED7',
    700: '#5500B8',
    800: '#40009A',
    900: '#30007F',
    950: '#160042',
        },
      },
    },
  },
}

100% freeNo signupRuns in your browser

About Color System Generator

Building a cohesive color system from scratch is harder than picking a single brand color. A proper design system needs 10 shades per hue (50 through 950), semantic roles (primary, secondary, success, warning, danger), and accessibility validation for every text/background pairing. WCAG 2.1 criteria AA and AAA define the contrast ratios that determine whether a design is legally compliant in many jurisdictions. Generating all of this from one input color — in a perceptually uniform color space — collapses hours of manual work into seconds.

How It Works

When you enter a brand color, the tool converts it from the input color space (hex, RGB, or HSL) into the OKLCH (Oklab lightness-chroma-hue) color space. OKLCH is a perceptually uniform space, meaning that a change of 0.1 in the L (lightness) channel produces the same perceived brightness shift regardless of hue. The 10 shades (50–950) are computed by distributing lightness values along a carefully tuned curve — lighter shades cluster near L=0.95 and darker shades near L=0.2 — while keeping chroma and hue as close to the original as possible.

The WCAG contrast ratio for each shade pair is calculated using the relative luminance formula from WCAG 2.1 Section 1.4.3. Relative luminance converts sRGB values through a linearization function and applies a weighted sum (0.2126R + 0.7152G + 0.0722B). The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance.

Export targets include Tailwind CSS config (colors object in tailwind.config.js), CSS custom properties (--color-primary-500 etc.), and W3C Design Token Community Group JSON format for interoperability with Figma Tokens, Style Dictionary, and other design toolchains.

Who Is This For

A startup founder enters their logo hex code and exports a complete Tailwind palette to share with their contractor, skipping the need for a dedicated designer.

A product designer checks whether a proposed primary/background color pair passes WCAG AA before handing off a component to engineering.

A developer building a white-label SaaS product generates a palette per tenant brand color and stores the output as CSS variables scoped to a tenant class.

A design system engineer exports JSON design tokens from the tool and feeds them into Style Dictionary to generate platform-specific outputs for web, iOS, and Android.

How to Use

Enter your brand color as hex, RGB, or use the color picker

View the auto-generated 10-shade palette (50 through 950)

Check the WCAG accessibility matrix for every text/background combo

Export as Tailwind config, CSS variables, or JSON design tokens

Frequently Asked Questions

Using the OKLCH color space for perceptually uniform shade generation. This produces more natural-looking palettes than HSL-based generators.

WCAG (Web Content Accessibility Guidelines) defines contrast ratios for readable text. AA requires 4.5:1, AAA requires 7:1. The tool checks every combination.

Yes. The tool generates a ready-to-paste Tailwind config object, CSS custom properties, and JSON design tokens.

HSL-based shade generators produce inconsistent perceived brightness — a 500-shade green looks much lighter than a 500-shade blue even at the same HSL lightness value. OKLCH (Oklab lightness, chroma, hue) is a perceptually uniform color space where equal numeric differences in lightness produce equal perceived brightness differences across all hues.

The WCAG accessibility matrix shows the contrast ratio between every foreground/background color pair in your palette. Cells with a green check pass AA (4.5:1 for normal text, 3:1 for large text). Cells with a red cross fail. Aim to pair only passing combinations in your UI.

Export the JSON design tokens format and import it into Figma using the Tokens Studio (formerly Figma Tokens) plugin. Each shade maps directly to a Figma color variable. The CSS custom property export also works with the Figma CSS import feature.