Design Tool

Website Theme Generator

Choose your brand colors and automatically generate accessible light and dark themes with hue-matched content colors. Export as a Presence theme, Tailwind CSS, or standard CSS variables.

Theme Workspace

Choose your brand colors, preview the generated theme in real time, and export production-ready CSS with a single click.

Theme Colors

Select the base, brand, and status colors for your theme. Matching content colors will be generated automatically.

Base

Base 100

#ffffff

Base 200

#f8f8f8

Base 300

#eeeeee

Brand

Primary

#422ad5

Secondary

#f43098

Accent

#00d3bb

Neutral

#09090b

Status

Info

#00bafe

Success

#00d390

Warning

#fcb700

Error

#ff627d

View Generated Dark Colors

Generated Dark Colors

These colors are generated automatically from your light theme.

Base

Base 100

#121212

Base 200

#1b1b1b

Base 300

#242424

Brand

Primary

#6668fd

Secondary

#ff77c6

Accent

#40e7d1

Neutral

#9e9ea1

Status

Info

#54daff

Success

#4aeaad

Warning

#fab800

Error

#ff6b7f

Live Preview

Preview your selected light theme or the automatically generated dark theme.

Theme Preview

Build a complete theme from your colors.

Content colors preserve the hue of their background while maintaining readable contrast.

Base Surface Scale

Base 100 is the page surface, Base 200 is the elevated surface, and Base 300 is the stronger border or muted layer.

Base 100

Base 200

Base 300

Primary

Generated content color

AAA

StratumFuse

Build something memorable.

Thoughtful digital products, built for real people and real businesses.

Strategy · Design · Development

Contrast: 7.30:1

Secondary

Generated content color

StratumFuse

Build something memorable.

Thoughtful digital products, built for real people and real businesses.

Strategy · Design · Development

Contrast: 4.89:1

Accent

Generated content color

AAA

StratumFuse

Build something memorable.

Thoughtful digital products, built for real people and real businesses.

Strategy · Design · Development

Contrast: 7.73:1

Neutral

Generated content color

AAA

StratumFuse

Build something memorable.

Thoughtful digital products, built for real people and real businesses.

Strategy · Design · Development

Contrast: 8.02:1

Info

Generated content color

AAA

StratumFuse

Build something memorable.

Thoughtful digital products, built for real people and real businesses.

Strategy · Design · Development

Contrast: 7.67:1

Success

Generated content color

AAA

StratumFuse

Build something memorable.

Thoughtful digital products, built for real people and real businesses.

Strategy · Design · Development

Contrast: 7.50:1

Warning

Generated content color

AAA

StratumFuse

Build something memorable.

Thoughtful digital products, built for real people and real businesses.

Strategy · Design · Development

Contrast: 7.81:1

Error

Generated content color

AAA

StratumFuse

Build something memorable.

Thoughtful digital products, built for real people and real businesses.

Strategy · Design · Development

Contrast: 7.17:1

Theme Output

Choose an output format and copy the light and dark generated theme.

1,924 chars

[data-theme="presence-light"] {
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98% 0 0);
  --color-base-300: oklch(95% 0 0);
  --color-base-content: oklch(38% 0 0);

  --color-primary: oklch(45% 0.24 277.023);
  --color-primary-content: oklch(96% 0.12 277.023);

  --color-secondary: oklch(65% 0.241 354.308);
  --color-secondary-content: oklch(22% 0.12 354.308);

  --color-accent: oklch(77% 0.152 181.912);
  --color-accent-content: oklch(26% 0.0912 181.912);

  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(72% 0.003 285.823);

  --color-info: oklch(74% 0.16 232.661);
  --color-info-content: oklch(22% 0.096 232.661);

  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(26% 0.1062 163.223);

  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(30% 0.1134 84.429);

  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(14% 0.1164 13.428);
}

[data-theme="presence-dark"] {
  --color-base-100: oklch(18% 0 0);
  --color-base-200: oklch(22% 0 0);
  --color-base-300: oklch(26% 0 0);
  --color-base-content: oklch(72% 0 0);

  --color-primary: oklch(60% 0.216 277.023);
  --color-primary-content: oklch(18% 0.12 277.023);

  --color-secondary: oklch(80% 0.2169 354.308);
  --color-secondary-content: oklch(26% 0.12 354.308);

  --color-accent: oklch(84% 0.1368 181.912);
  --color-accent-content: oklch(34% 0.0821 181.912);

  --color-neutral: oklch(70% 0.005 285.823);
  --color-neutral-content: oklch(18% 0.003 285.823);

  --color-info: oklch(84% 0.144 232.661);
  --color-info-content: oklch(34% 0.0864 232.661);

  --color-success: oklch(84% 0.1593 163.223);
  --color-success-content: oklch(34% 0.0956 163.223);

  --color-warning: oklch(82% 0.1795 84.429);
  --color-warning-content: oklch(30% 0.1077 84.429);

  --color-error: oklch(72% 0.1843 15);
  --color-error-content: oklch(18% 0.1106 15);
}

Generate a complete website color system.

Most color pickers stop after selecting a handful of colors. Modern websites need much more than that.

This tool transforms your brand colors into a complete semantic color system by generating matching content colors, verifying accessibility, and creating a companion dark theme automatically. Whether you're building a Presence website, a Tailwind project, or your own design system, you can start with your brand colors and finish with a usable theme.

What does this theme generator create?

Complete semantic website themes from your brand colors.
Automatically generated content colors with strong WCAG contrast.
Hue-matched foreground colors that preserve your brand identity.
Automatically generated dark theme based on your light color palette.
Export as a Presence theme, Tailwind CSS, or standard CSS variables.
Runs entirely in your browser, no uploads or server processing.