Color Scheme Generator

Generate light and dark CSS custom property color schemes from a single primary color.

Primary Color

Scheme Type

Preview

primary (light)#6366f1

primary (dark)#9698f3

background#ffffff

bg dark#0f172a

surface#f8fafc

surface dark#1e293b

text#0f172a

text dark#f8fafc

CSS Custom Properties

:root {
  /* Primary */
  --color-primary: #6366f1;
  --color-primary-hover: #3538ed;
  --color-primary-light: #ffffff;

  /* Surfaces */
  --color-background: #ffffff;
  --color-surface: #f8fafc;
  --color-surface-hover: #f1f5f9;

  /* Text */
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-on-primary: #ffffff;

  /* Border */
  --color-border: #e2e8f0;
  --color-border-focus: #6366f1;
}

[data-theme="dark"] {
  /* Primary */
  --color-primary: #9698f3;
  --color-primary-hover: #7274ee;
  --color-primary-light: #4345c7;

  /* Surfaces */
  --color-background: #0f172a;
  --color-surface: #1e293b;
  --color-surface-hover: #334155;

  /* Text */
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-text-on-primary: #ffffff;

  /* Border */
  --color-border: #334155;
  --color-border-focus: #9698f3;
}

CSS Color Scheme Generator — light & dark mode in one click

This tool generates a complete set of CSS custom properties (variables) for both light and dark themes from a single primary color. All derived colors are computed using HSL math — lightening, darkening, and hue shifts — so the palette is always harmonious. The minimal scheme includes primary, surface, text, and border variables. The full scheme adds semantic colors: success (120° hue shift), warning (45° shift), and error (−45° shift) — plus shadow values. Apply the dark theme by setting data-theme="dark" on <html> or any container element. Pair with the Color Palette Generator for a full design token system.

Private & free — this tool runs entirely in your browser.