Tailwind-style theme

Client

Inspired by common Tailwind CSS primary scales and shadcn-style semantic tokens: one theme color becomes a full ramp plus light and dark surfaces you can drive with data-theme—no install required; everything runs in your tab.

Tailwind-style theme

Pick one brand color. We build a primary 50–950 ramp (sRGB tint/shade, base at 500) and derive light and dark semantic tokens (--background, --primary, …). Copy CSS for data-theme switching or a full HTML file demo—all local.

Theme color (brand / primary base)

Primary scale

Preview

Card

Muted body copy uses the semantic muted pair for secondary text.

CSS (variables)

:root {
  --primary-50: #ECF6F5;
  --primary-100: #BFE3E0;
  --primary-200: #93CFCA;
  --primary-300: #66BBB4;
  --primary-400: #3AA89E;
  --primary-500: #0D9488;
  --primary-600: #0B796F;
  --primary-700: #085E56;
  --primary-800: #06423D;
  --primary-900: #032724;
  --primary-950: #010C0B;
}

[data-theme="light"] {
  --background: #ECF6F5;
  --foreground: #091718;
  --card: #FFFFFF;
  --card-foreground: #091718;
  --muted: #E2ECEC;
  --muted-foreground: #65757C;
  --accent: #BFE3E0;
  --accent-foreground: #032724;
  --primary: #0B796F;
  --primary-foreground: #FAFAFA;
  --border: #93CFCA;
  --ring: #3AA89E;
}

[data-theme="dark"] {
  --background: #0A2D2C;
  --foreground: #E9F3F2;
  --card: #163837;
  --card-foreground: #E9F3F2;
  --muted: #20403F;
  --muted-foreground: #8C9FA5;
  --accent: #06423D;
  --accent-foreground: #BFE3E0;
  --primary: #3AA89E;
  --primary-foreground: #FAFAFA;
  --border: #213F3F;
  --ring: #3AA89E;
}

HTML demo (standalone page)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Theme demo</title>
  <style>
:root {
  --primary-50: #ECF6F5;
  --primary-100: #BFE3E0;
  --primary-200: #93CFCA;
  --primary-300: #66BBB4;
  --primary-400: #3AA89E;
  --primary-500: #0D9488;
  --primary-600: #0B796F;
  --primary-700: #085E56;
  --primary-800: #06423D;
  --primary-900: #032724;
  --primary-950: #010C0B;
}

[data-theme="light"] {
  --background: #ECF6F5;
  --foreground: #091718;
  --card: #FFFFFF;
  --card-foreground: #091718;
  --muted: #E2ECEC;
  --muted-foreground: #65757C;
  --accent: #BFE3E0;
  --accent-foreground: #032724;
  --primary: #0B796F;
  --primary-foreground: #FAFAFA;
  --border: #93CFCA;
  --ring: #3AA89E;
}

[data-theme="dark"] {
  --background: #0A2D2C;
  --foreground: #E9F3F2;
  --card: #163837;
  --card-foreground: #E9F3F2;
  --muted: #20403F;
  --muted-foreground: #8C9FA5;
  --accent: #06423D;
  --accent-foreground: #BFE3E0;
  --primary: #3AA89E;
  --primary-foreground: #FAFAFA;
  --border: #213F3F;
  --ring: #3AA89E;
}
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: …

Preview truncated—copy downloads the full file with toggle script included.

Common use cases

Paste a HEX brand swatch from a mood board, copy the generated :root + [data-theme] CSS into a static site or design handoff.
Use the standalone HTML file as a quick stakeholder preview before wiring tokens into Tailwind v4 @theme or a component library.
Compare light vs dark in the built-in preview, then open the contrast checker on primary + foreground if you need WCAG numbers.

Common mistakes to avoid

Expecting identical ramps to default Tailwind palette colors
This tool derives steps by mixing your base toward white and black in sRGB—like many token builders—not Tailwind’s published blue/green factory values.
Forgetting to set data-theme on a parent in your app
The semantic tokens are scoped to [data-theme="light"] and [data-theme="dark"]. Copy the CSS as-is and set data-theme on html or body (the HTML demo shows one pattern).

FAQ

Is this an official Tailwind product?

No. It is a standalone helper that mirrors familiar naming (primary-50…950 and common semantic variable names) so results map cleanly to Tailwind-like workflows.

Are my colors uploaded?

No. Parsing and generation use your browser only.

Can agents prefill the theme color via URL?

Yes—the same color query parameters as other color tools (for example color or colorb with a CSS color string) prefill the input when supported.

Related utilities you can open in another tab—mostly client-side.

Tailwind-style theme