HeroUI-style theme

Client

Build an OKLCH variable pack in the same spirit as HeroUI’s theme builder: one accent drives --accent, --surface, form fields, and neutral rails. Status hues (success / warning / danger) follow the library defaults; processing stays in your tab.

HeroUI-style CSS theme

?
Pick one brand color. We reuse the same sRGB ramp semantics as our Tailwind-style generator, then emit OKLCH variables named like HeroUI v3 (--accent, --surface, --field-background, status colors, …). Paste the @layer base block after @import "@heroui/styles"—everything stays in your browser.
Corner radius preset

Maps to --radius and --field-radius like HeroUI defaults.

Preview
HeroUI-style preview

Surface

Muted helper text uses --muted. Status chips below use the same success / warning / danger hues as HeroUI defaults.

SuccessWarningDanger
CSS (@layer base)
@layer base {
  /* Toolcore: HeroUI-style semantic overrides from one brand color (OKLCH). Pair with @import "@heroui/styles". */
  :root,
  .light,
  .default,
  [data-theme="light"],
  [data-theme="default"] {
    color-scheme: light;
    --background: oklch(0.9611 0.0209 304);
    --foreground: oklch(0.1844 0.0406 298.5);
    --surface: oklch(1 0 89.9);
    --surface-foreground: oklch(0.1844 0.0406 298.5);
    --surface-secondary: oklch(0.9834 0.0097 305.4);
    --surface-secondary-foreground: oklch(0.1844 0.0406 298.5);
    --surface-tertiary: oklch(0.9302 0.0208 301.1);
    --surface-tertiary-foreground: oklch(0.1844 0.0406 298.5);
    --overlay: oklch(1 0 89.9);
    --overlay-foreground: oklch(0.1844 0.0406 298.5);
    --muted: oklch(0.5427 0.0471 297);
    --scrollbar: oklch(0.9221 0.0083 301.3);
    --default: oklch(0.8711 0.0665 301.5);
    --default-foreground: oklch(0.2268 0.0866 295.9);
    --accent: oklch(0.467 0.2098 293.3);
    --accent-foreground: oklch(0.9851 0 89.9);
    --field-background: oklch(1 0 89.9);
    --field-foreground: oklch(0.1844 0.0406 298.5);
    --field-placeholder: oklch(0.5427 0.0471 297);
    --field-border: transparent;
    --segment: oklch(1 0 89.9);
    --segment-foreground: oklch(0.2103 0.0059 285.89);
    --border: oklch(0.7827 0.1153 300.4);
    --separator: oklch(0.8442 0.0813 301.5);
    --focus: oklch(0.467 0.2098 293.3);
    --link: oklch(0.1844 0.0406 298.5);
    --backdrop: rgba(0, 0, 0, 0.5);
    --surface-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06);
    --overlay-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03), 0 14px 28px 0 rgba(0, 0, 0, 0.08);
    --field-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06);
    --radius: 0.5rem;
    --field-radius: calc(0.5rem * 1.5);
    --success: oklch(0.7329 0.1935 150.81);
    --success-foreground: oklch(0.2103 0.0059 285.89);
    --warning: oklch(0.7819 0.1585 72.33);
    --warning-foreground: oklch(0.2103 0.0059 285.89);
    --danger: oklch(0.6532 0.2328 25.74);
    --danger-foreground: oklch(0.9911 0 0);
  }

  .dark,
  [data-theme="dark"] {
    color-scheme: dark;
    --background: oklch(0.2528 0.0861 296);
    --foreground: oklch(0.9527 0.0165 301.2);
    --surface: oklch(0.2958 0.08 297.7);
    --surface-foreground: oklch(0.9527 0.0165 301.2);
    --surface-secondary: oklch(0.2772 0.0822 296.7);
    --surface-secondary-foreground: oklch(0.9527 0.0165 301.2);
    --surface-tertiary: oklch(0.3285 0.0769 297.7);
    --surface-tertiary-foreground: oklch(0.9527 0.0165 301.2);
    --overlay: oklch(0.3035 0.0797 297.9);
    --overlay-foreground: oklch(0.9527 0.0165 301.2);
    --muted: oklch(0.6819 0.0475 298);
    --scrollbar: oklch(0.3368 0.0782 297.4);
    --default: oklch(0.312 0.1302 294.8);
    --default-foreground: oklch(0.8711 0.0665 301.5);
    --accent: oklch(0.6129 0.2099 296.8);
    --accent-foreground: oklch(0.9851 0 89.9);
    --field-background: oklch(0.2958 0.08 297.7);
    --field-foreground: oklch(0.9527 0.0165 301.2);
    --field-placeholder: oklch(0.6819 0.0475 298);
    --field-border: transparent;
    --segment: oklch(0.3709 0.0704 298.7);
    --segment-foreground: oklch(0.9527 0.0165 301.2);
    --border: oklch(0.3272 0.0739 298.7);
    --separator: oklch(0.3017 0.078 297.2);
    --focus: oklch(0.6129 0.2099 296.8);
    --link: oklch(0.9527 0.0165 301.2);
    --backdrop: rgba(0, 0, 0, 0.6);
    --surface-shadow: 0 0 0 0 transparent inset;
    --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    --field-shadow: 0 0 0 0 transparent inset;
    --radius: 0.5rem;
    --field-radius: calc(0.5rem * 1.5);
    --success: oklch(0.7 0.145 150.81);
    --success-foreground: oklch(0.2103 0.0059 285.89);
    --warning: oklch(0.8203 0.1388 76.34);
    --warning-foreground: oklch(0.2103 0.0059 285.89);
    --danger: oklch(0.594 0.1967 24.63);
    --danger-foreground: oklch(0.9911 0 0);
  }
}
HTML switch pattern
<!-- Light -->
<html class="light" data-theme="light">
  <body class="bg-background text-foreground">…</body>
</html>

<!-- Dark -->
<html class="dark" data-theme="dark">
  <body class="bg-background text-foreground">…</body>
</html>

Common use cases

  • Prototyping a HeroUI + Tailwind v4 app: paste the generated @layer base block after @import "@heroui/styles" and set class + data-theme on html per the copied notes.
  • Matching our Tailwind-style or MUI palette tools: all three start from the same sRGB ramp recipe, so design tokens stay comparable across stacks.
  • Tweaking corner radius before handoff: switch sm / md / lg and copy again—--radius and --field-radius update together.

Common mistakes to avoid

  • Expecting hover soft variants to appear without HeroUI styles

    This page only emits the core semantic variables. Calculated tokens like soft fills still come from @heroui/styles once that package is installed.

  • Forgetting both class and data-theme on the document root

    HeroUI examples use class="light" or class="dark" together with data-theme="light" | "dark" on html. Use the same pattern your setup expects.

FAQ

Is this affiliated with HeroUI?

No. Toolcore is an independent helper. Variable names and structure follow HeroUI v3’s public theme file so paste results align with that ecosystem.

Are my colors uploaded?

No. Parsing and conversion run only in your browser.

Can agents prefill the brand color via URL?

Yes—use the same keys as other color tools: color or colorb (or q / qb aliases).

Common search terms

Phrases people search for that match this tool. See the full long-tail keyword index.

  • heroui theme css variables generator
  • nextui heroui oklch theme
  • tailwind v4 heroui custom theme

More tools

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