Can I use a Theme Studio palette in a commercial project?
Yes. The generated CSS follows the same MIT-licensed token system as the free Template Empire component library, so you can adapt and use it in personal or commercial projects.
Free colour-system builder
Theme Studio for React and Next.js components
Theme Studio is a free tool for shaping the light and dark colour system used by Template Empire React and Next.js components. Adjust meaningful OKLCH tokens, test a real component and export one production-ready Tailwind v4 CSS block.
Need the token architecture first? Read the component theming guide.
Preview component
Search the catalogue. Only the selected demo is loaded.
80 components found
HeroesGSAPPrefers dark
Open props and component controlsTheme controls
Begin with three coherent colour decisions, then refine individual stops and semantic mappings if needed.
Advanced token controls
Override one derived primitive at a time, or remap the semantic tokens consumed by components. Every value remains typed and validated.
Live library preview
Aurora Hero · Heroes
Restoring your Theme Studio preview…
Accessibility guardrail
Required sRGB contrast pairs
Ratios are calculated independently for each palette after alpha compositing and deterministic sRGB gamut mapping.
All required pairs pass. Production CSS export is available.
dark palette
All passForeground on background
19.07:1Pass · required 4.5:1. Foreground on background measures 19.07:1 and passes the required 4.5:1.
Muted text on background
7.03:1Pass · required 4.5:1. Muted text on background measures 7.03:1 and passes the required 4.5:1.
Primary foreground on primary
5.29:1Pass · required 4.5:1. Primary foreground on primary measures 5.29:1 and passes the required 4.5:1.
Focus ring on background
7.76:1Pass · required 3.0:1. Focus ring on background measures 7.76:1 and passes the required 3.0:1.
Focus ring on surface
7.11:1Pass · required 3.0:1. Focus ring on surface measures 7.11:1 and passes the required 3.0:1.
light palette
All passForeground on background
19.07:1Pass · required 4.5:1. Foreground on background measures 19.07:1 and passes the required 4.5:1.
Muted text on background
7.56:1Pass · required 4.5:1. Muted text on background measures 7.56:1 and passes the required 4.5:1.
Primary foreground on primary
5.04:1Pass · required 4.5:1. Primary foreground on primary measures 5.04:1 and passes the required 4.5:1.
Focus ring on background
5.04:1Pass · required 3.0:1. Focus ring on background measures 5.04:1 and passes the required 3.0:1.
Focus ring on surface
4.53:1Pass · required 3.0:1. Focus ring on surface measures 4.53:1 and passes the required 3.0:1.
Tailwind v4 output
One complete theme file
Includes primitives, dark and light semantic mappings, motion tokens and inline Tailwind utility aliases.
/* Generated by Template Empire Theme Studio. */
@theme static {
/* Tier 1 primitives: dark/default palette. */
--color-neutral-50: oklch(0.985 0.002 250);
--color-neutral-100: oklch(0.96 0.003 250);
--color-neutral-200: oklch(0.92 0.005 252);
--color-neutral-300: oklch(0.86 0.007 254);
--color-neutral-400: oklch(0.7 0.01 256);
--color-neutral-500: oklch(0.55 0.012 258);
--color-neutral-600: oklch(0.44 0.013 258);
--color-neutral-700: oklch(0.37 0.014 259);
--color-neutral-800: oklch(0.28 0.015 260);
--color-neutral-900: oklch(0.21 0.015 260);
--color-neutral-950: oklch(0.14 0.012 260);
--color-brand-400: oklch(0.72 0.16 265);
--color-brand-500: oklch(0.62 0.19 265);
--color-brand-600: oklch(0.54 0.19 265);
--color-accent-400: oklch(0.78 0.15 200);
}
:root {
color-scheme: dark;
--background: var(--color-neutral-950);
--foreground: var(--color-neutral-50);
--muted: oklch(from var(--color-neutral-50) l c h / 0.6);
--primary: var(--color-brand-500);
--primary-foreground: var(--color-neutral-950);
--border: oklch(from var(--color-neutral-50) l c h / 0.1);
--ring: var(--color-brand-400);
--surface: oklch(from var(--foreground) l c h / 0.05);
--destructive: var(--foreground);
/* Canonical motion tokens remain unchanged by Theme Studio. */
--dur-1: 150ms;
--dur-2: 300ms;
--dur-3: 600ms;
--dur-4: 1200ms;
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
/* Reduced motion still belongs in an OS prefers-reduced-motion media query. */
}
:root[data-theme="light"] {
color-scheme: light;
/* Light-only primitive overrides. */
--color-accent-400: oklch(0.6 0.17 200);
--background: var(--color-neutral-50);
--foreground: var(--color-neutral-950);
--muted: oklch(from var(--color-neutral-950) l c h / 0.7);
--primary: var(--color-brand-600);
--primary-foreground: var(--color-neutral-50);
--border: oklch(from var(--color-neutral-950) l c h / 0.12);
--ring: var(--color-brand-600);
--surface: oklch(from var(--foreground) l c h / 0.05);
--destructive: var(--foreground);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-muted: var(--muted);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-border: var(--border);
--color-ring: var(--ring);
--color-surface: var(--surface);
--color-destructive: var(--destructive);
}
Integration
Add the generated theme once
Place the complete generated block in the global Tailwind v4 stylesheet that imports Tailwind. It declares the primitive ramp, dark-default and light semantic mappings, and the inline Tailwind aliases consumed by installed components. Keep reduced-motion media queries independent from colour-theme selectors.
Read the complete theming guideTheme Studio questions
Does Theme Studio guarantee that my site is accessible?
No automated tool can certify an entire site. Theme Studio checks the required text, control and focus-ring colour pairs in both palettes, blocks export when one fails, and explains what still needs attention.
How does the generated CSS connect to installed components?
Template Empire components consume semantic Tailwind utilities such as background, foreground, primary, border and ring. Add the generated token block to your Tailwind v4 global CSS and installed components inherit those mappings.