CSS light-dark() & Relative Color Generator

Give it one brand color and get a complete light and dark theme as CSS variables, built with light-dark() and relative color syntax, plus fallbacks for older browsers.

Brand color

Color space for relative colors

Main token name

Hover shift 6

Neutral tint from brand hue 10

Add harmony tokens (accent, complement, triad) Add manual data-theme switch

Support badges show what your browser can run. The preview below always uses computed values, so it works everywhere.

Live preview

Acme

Project settings

Muted description text sits on the raised surface. Hover the buttons to see the hover and active tokens.

Subtle brand background with a matching border.

Tokens

Contrast checks (WCAG 2, 4.5:1)

✓ Copied!