Ray Group

Color palette tool

Color scheme generator

Free color scheme generator and palette tool. Pick a brand color, build a light and dark design system, check contrast, then copy CSS variables or a Tailwind theme — for free.

Light

Product name

Body text sits on the background. It should stay readable at a glance.

Secondary text for captions, SKUs, and timestamps.

A surface, such as a card or a field.

ContinueText link
Email address
In stockLow stockOut of stock

Dark

Product name

Body text sits on the background. It should stay readable at a glance.

Secondary text for captions, SKUs, and timestamps.

A surface, such as a card or a field.

ContinueText link
Email address
In stockLow stockOut of stock

Scale

  • 50

    #f8f2ff

  • 100

    #f2e5ff

  • 200

    #e5d1fb

  • 300

    #d3b5f1

  • 400

    #ba95de

  • 500

    #a077c5

  • 600

    #855ca8

  • 700

    #6c468d

  • 800

    #543370

  • 900

    #3c2252

  • 950

    #251235

Contrast

Body text and button labels need 4.5:1. A pair between 3:1 and 4.5:1 is only enough for large text. The button color itself needs 3:1 against the background.

Checks that do not pass — light: 1, dark: 0.

  • Text on background15.73:1Pass
  • Secondary text on background6.60:1Pass
  • Text on surface17.26:1Pass
  • Label on button5.27:1Pass
  • Link on background6.60:1Pass
  • Button on background2.98:1Fail
  • Label on success5.38:1Pass
  • Label on warning11.54:1Pass
  • Label on danger6.57:1Pass

Export

:root {
  --background: #f8f2ff;
  --surface: #ffffff;
  --foreground: #251235;
  --muted: #6c468d;
  --border: #e5d1fb;
  --primary: #a67dcc;
  --primary-foreground: #1c1b19;
  --accent: #6c468d;
  --success: #157a45;
  --success-foreground: #ffffff;
  --warning: #f5d061;
  --warning-foreground: #1c1b19;
  --danger: #b42318;
  --danger-foreground: #ffffff;
  --brand-50: #f8f2ff;
  --brand-100: #f2e5ff;
  --brand-200: #e5d1fb;
  --brand-300: #d3b5f1;
  --brand-400: #ba95de;
  --brand-500: #a077c5;
  --brand-600: #855ca8;
  --brand-700: #6c468d;
  --brand-800: #543370;
  --brand-900: #3c2252;
  --brand-950: #251235;
}

.dark {
  --background: #251235;
  --surface: #3c2252;
  --foreground: #f8f2ff;
  --muted: #d3b5f1;
  --border: #543370;
  --primary: #a67dcc;
  --primary-foreground: #1c1b19;
  --accent: #d3b5f1;
  --success: #157a45;
  --success-foreground: #ffffff;
  --warning: #f5d061;
  --warning-foreground: #1c1b19;
  --danger: #b42318;
  --danger-foreground: #ffffff;
}

What you get

  • Light and dark palettes
  • Contrast checks
  • CSS variables export
  • Tailwind theme export

Why use this color scheme generator

Skip guessing hex codes. This free color palette tool turns one brand color into a coherent light and dark CSS color scheme with contrast checks — ready to paste as CSS variables or Tailwind into your design system.

How to generate a color scheme

  1. Pick a brand color with the picker or paste a hex value into this free color palette tool.
  2. Review the light and dark color scheme, contrast checks, and UI preview.
  3. Copy CSS variables or a Tailwind theme and paste them into your repo.

Frequently asked

Color scheme generator FAQ

Is this color scheme generator free?
Yes. This free color palette tool lets you generate light and dark schemes, check contrast, and export CSS at no cost.
What does the color palette tool create?
From one brand color it builds a full light and dark design-system palette — backgrounds, text, accents, and status colors — ready as CSS variables or Tailwind.
Does my brand color get uploaded?
No. Everything runs in your browser. Nothing you enter is stored on our servers.
Who should use this color scheme generator?
Designers and developers who need a coherent light/dark CSS color scheme from a single brand color — fast.

More free tools