Color System Generator

What the Color System Generator Does

The Color System Generator turns a single base color into a complete design token scale. Enter one hex value and the tool produces eleven shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950) that share the same hue and progress evenly from near white to near black. Every shade is calculated live in your browser, and the full set exports as CSS custom properties, a Tailwind config snippet, or SCSS variables with one click.

Design systems built on a single source color stay consistent because every hover state, border, background, and text tone comes from the same family instead of a pile of hand-picked hex codes. The tool also reports the WCAG contrast level for each shade, so you know which steps are safe for text and which should stay in the background.

How to Use the Color System Generator

1. Pick a base color with the swatch or type a hex code such as #6366f1.
2. Name the color, for example primary, so the exported variables read --primary-500.
3. Review the live preview strip and the shade table with contrast information.
4. Choose the export format: CSS Variables, Tailwind Config, or SCSS Variables.
5. Copy the generated code with the copy button and paste it into your project.

Understanding the 50 to 950 Shade Scale

The numeric scale follows the convention popularized by Tailwind CSS and Material Design. Shade 50 is the lightest step and works well for page backgrounds and subtle panels. Shade 100 and 200 suit borders, dividers, and disabled states. Shades 300 to 500 are the workhorse tones for interactive elements, with 500 usually matching the visual weight of your original base color. Shades 600 to 800 handle hover and active states, and 900 and 950 serve as heading text and near-black accents.

Because the base color maps to its nearest step, the scale keeps the character of your brand color instead of drifting to a different hue as it darkens. A muted color produces a muted scale, and a vivid color produces a vivid one, with chroma gently reduced at the extremes so the lightest and darkest steps do not look fluorescent.

Why the Shades Use OKLCH

Most simple palette generators lighten and darken colors in HSL, which is fast but not perceptually even. In HSL, the same lightness jump can look small in one hue and huge in another. This tool places each step on a fixed OKLCH lightness ladder and keeps the hue constant, which produces a progression that looks smooth to the human eye. Chroma is scaled with a bell curve that peaks near the middle of the scale and tapers at both ends, then the result is clipped back into the sRGB gamut so every exported hex value is valid and displayable.

Exporting to CSS, Tailwind, and SCSS

CSS variables: the default export writes a :root block with custom properties such as --primary-50 through --primary-950. Paste it into your global stylesheet and reference the tokens anywhere with var(--primary-600).

Tailwind config: the Tailwind export nests the scale under your color name in theme.extend.colors, which unlocks utilities like bg-primary-500 and text-primary-800 automatically.

SCSS variables: the SCSS export emits $primary-50 through $primary-950 declarations, ready for partials in a Sass or SCSS pipeline.

Round out the palette with a Color Scheme Generator when you need complementary or accent colors, and convert any value between hex, RGB, and HSL with the Color Converter.

Checking Contrast for Accessibility

The shade table lists the best text color (white or black) for every step along with the WCAG contrast ratio and level. The ratio is computed from relative luminance:

$$ \text{Contrast} = \frac{L_1 + 0.05}{L_2 + 0.05} $$

where $L_1$ is the lighter of the two relative luminances and $L_2$ is the darker one. Normal body text needs a ratio of at least 4.5:1 (AA) and ideally 7:1 (AAA). Large text of 18 points or 14 points bold needs only 3:1. If a shade in your scale fails for text, keep it for surfaces and pair it with a step that passes. For a dedicated audit of two specific colors, use the Color Contrast Checker.

Tips for Consistent Color Systems

• Start with one primary color and keep it as the single source of truth for the brand hue.
• Use 500 as the default action color, 600 for hover, and 700 for active states.
• Reserve 50 to 100 for backgrounds and 900 to 950 for high-emphasis text.
• Store the generated tokens once and reference them everywhere instead of redefining hex codes per component.
• Recheck contrast whenever you swap the base color, since darker or lighter bases shift the whole table.