Palette generator

SUS themes are a CSS class: .theme-dark / .theme-light alias --thm-* tokens onto the --base-* palette scale, and any project can add its own .theme-<name> block instead. This tool generates one from a few seed inputs — a theme name, the surface lightness, and an accent color — and fills in every --thm-* name the runtime defines, so the result is a complete, drop-in theme rather than a partial override.

The check that matters most here is the contrast readout: for the main text/background pairs the tool computes the actual WCAG ratio and flags anything under the AA text threshold (4.5:1), instead of leaving that to guesswork after the colors are already shipped.

Theme nameBecomes the CSS class .theme-<name>. .theme-midnightSurface lightness — 10Low = dark-leaning theme (surfaces get lighter as they raise). High = light-leaning (surfaces get darker as they raise).Primary (accent)Custom secondary accentCustom danger accent

Generated block

.theme-midnight {
    --thm-bg-page: #1a1a1a;
    --thm-bg-surface: #242424;
    --thm-bg-surface-raised: #2e2e2e;
    --thm-bg-surface-overlay: #383838;
    --thm-bg-surface-variant: #3d3d3d;
    --thm-bg-disabled: #666666;
    --thm-text-primary: #f5f5f5;
    --thm-text-secondary: #dbdbdb;
    --thm-text-disabled: #a8a8a8;
    --thm-text-on-primary: #0a0a0a;
    --thm-border: #4d4d4d;
    --thm-border-hover: #757575;
    --thm-border-focus: #3d9cf0;
    --thm-primary: #3d9cf0;
    --thm-primary-hover: #9cccf7;
    --thm-primary-pressed: #0e69b9;
    --thm-secondary: #4d4d4d;
    --thm-secondary-hover: #5c5c5c;
    --thm-success: #22c55e;
    --thm-success-hover: #45df7e;
    --thm-warning: #f59e0b;
    --thm-warning-hover: #f7b546;
    --thm-error: #ef4444;
    --thm-error-hover: #f47c7c;
    --thm-info: #38bdf8;
    --thm-info-hover: #73d1fa;
    --thm-scrim: rgba(0, 0, 0, 0.3);
    --thm-hover-overlay: rgba(255, 255, 255, 0.05);
    --thm-selected-overlay: rgba(255, 255, 255, 0.1);
    --thm-disabled-overlay: rgba(255, 255, 255, 0.05);
    --thm-rare: #4dabf7;
    --thm-epic: #a78bfa;
    --thm-legendary: #fbbf24;
    --thm-heal: #34d399;
    --thm-shield: #22d3ee;
}

Text/background contrast

WCAG ratio, AA text threshold 4.5:1. Pairs below it are flagged.

Aatext-primary / bg-page15.96:1
Aatext-secondary / bg-page12.57:1
Aatext-primary / bg-surface14.24:1
Aatext-on-primary / primary6.80:1

Preview

Card title

Body text on this surface uses text-secondary; this line uses text-primary.

hover overlay

Palette generator ​

Next ​

Palette generator

Next