Design Tool

Website Theme Generator

Choose your brand colors and automatically generate a complete website theme from your color palette with accessible, 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

Live Preview

Preview each selected color with its automatically generated content color.

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 generated theme.

962 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);
}

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 exporting production-ready CSS. 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.
Export as a Presence theme, Tailwind CSS, or standard CSS variables.
Runs entirely in your browser, no uploads or server processing.