The CSS Variables Color Generator

Most palette generators export Tailwind configs. We believe in pure HTML/CSS. Drop your base brand color below and we will automatically calculate a fully robust, accessible LCH palette (from 50-900 weights) exported directly as CSS Custom Properties. Ready for production.

1. Pick Brand Color

Primary Scale

Slate Scale

variables.css

:root {
  /* Brand Scale */
  --color-primary-50: undefined;
  --color-primary-100: undefined;
  --color-primary-200: undefined;
  --color-primary-300: undefined;
  --color-primary-400: undefined;
  --color-primary-500: undefined;
  --color-primary-600: undefined;
  --color-primary-700: undefined;
  --color-primary-800: undefined;
  --color-primary-900: undefined;
  --color-primary-950: undefined;

  /* Neutral Slate Scale */
  --color-slate-50: undefined;
  --color-slate-100: undefined;
  --color-slate-200: undefined;
  --color-slate-300: undefined;
  --color-slate-400: undefined;
  --color-slate-500: undefined;
  --color-slate-600: undefined;
  --color-slate-700: undefined;
  --color-slate-800: undefined;
  --color-slate-900: undefined;
  --color-slate-950: undefined;
  
  /* Semantic Mappings */
  --bg-main: var(--color-slate-900);
  --bg-surface: var(--color-slate-800);
  --border-subtle: var(--color-slate-700);
  --text-primary: #ffffff;
  --text-muted: var(--color-slate-300);
  
  --brand-solid: var(--color-primary-500);
  --brand-hover: var(--color-primary-400);
}

Need the HTML to use this?

Don't spend a week writing Flexbox layouts. The CommandHQ SaaS Admin Panel template is built on these exact CSS variables. Paste your colors into the root, and the entire 50-page architecture perfectly inherits your brand.

Explore CommandHQ