Palette Generator
Turn one color into a full design-system scale. Export as CSS variables for Tailwind, shadcn, and more.
Invalid color. Try #hex or a CSS color.
What Is a Design System Color Scale?
A design system color scale is a structured set of color stops, typically 11 values from 50 to 950, derived from a single base color. Each stop has a named weight analogous to font weights, making it easy to reference in code. This pattern is used by Tailwind CSS, Radix Colors, shadcn/ui, Material Design, and virtually every modern design system.
This generator interpolates through OKLCH, the most perceptually uniform color space available, ensuring that the lightness steps look visually even. Lower stops (50, 100) are very light tints for backgrounds and surfaces; higher stops (800, 900, 950) are deep shades for body text and headings.
Stop Reference Guide
50 – 200: Backgrounds & Surfaces
Very light tints barely distinguishable from white. Use for page backgrounds, card surfaces, hover states on white, and tinted badge backgrounds. These stops ensure content remains readable with dark text on top.
300 – 400: Borders & Placeholders
Muted mid-range values. Ideal for borders, dividers, placeholder text, and disabled UI elements. High enough contrast to be visible on light backgrounds but subtle enough not to compete with content.
500 – 600: Primary Actions
The core brand color range. 500 is the base, typically used for primary buttons, links, and focus rings. 600 is the hover/active state. These stops must pass WCAG AA contrast requirements when used as text on white, or when white text is used on them.
700 – 950: Text & Headings
Deep, rich stops for high-contrast text. 700 suits body copy on light surfaces; 800-900 for headings and emphasis. 950 is near-black with a color tint, more refined than pure black for headings.
Exporting as CSS Variables
The "Copy CSS Variables" button exports a block of CSS custom property declarations ready to paste into your :root. The format follows the Tailwind CSS convention for compatibility with Tailwind v4 and shadcn/ui themes:
:root {
--color-50: #f0f7ff;
--color-100: #e0f0ff;
--color-200: #c8e3ff;
/* ... */
--color-950: #00213d;
}
For Tailwind v4, reference these variables in your @theme block inside your CSS file. For shadcn/ui, map the stops to its --primary, --primary-foreground tokens.