Color Scheme Generator

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

Presets:

CSS Length: 844 charsVariables Count: 16Configured Color: #6366f1

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

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.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing light and dark custom-property sets from one primary colour.
Generating a starting theme rather than picking every value by hand.
Producing semantic tokens for both modes at once.
Getting a scheme to review before adopting it.
Building a theme where the dark mode is derived rather than improvised.

Frequently Asked Questions

What are the classical harmony rules?: Complementary is two hues 180° apart; analogous is neighbours within about 30°; triadic is three at 120°; split-complementary takes the two neighbours of the complement. They are relationships on the hue wheel, which is why they generalise across any base colour.
Why does a complementary pair sometimes look wrong?: Because the RGB wheel and the painter's RYB wheel disagree. Red's complement is cyan on a screen and green on a colour wheel from art class — both are called complementary and they name different colours, which is the root of most confusion about the term.
Should a scheme use equal amounts of each colour?: No — the 60-30-10 convention exists because equal weighting is what makes a technically correct palette look amateurish. A dominant neutral, a secondary, and a small accent is the proportion that reads as designed rather than as a swatch card.
Does harmony guarantee accessible contrast?: Not at all, and they are independent properties. Two complementary hues at the same lightness have almost no luminance contrast, so text in one on the other is unreadable regardless of how harmonious the pair is. Contrast has to be measured separately.
Why do generated schemes look flat in a real interface?: Because an interface needs a neutral ramp more than it needs five hues. Most of a screen is greys and near-whites, with colour reserved for state and emphasis — so a scheme is a starting point for the accent colours, not a palette for the whole design.

Common errors and gotchas

Deriving dark mode by inversion, which produces wrong hues rather than a theme.
Shipping without re-checking contrast, since every ratio changes between modes.
Using pure black as the dark background, where a lifted surface reads better.
Keeping saturation constant across modes, when saturated colours read harsher on dark.
Naming tokens after colours rather than roles, which makes a rebrand a rename.