Turn your brand color into a Tailwind v4 theme
A worked tutorial: generate a Tailwind CSS v4 @theme block from one brand hex, use the utilities, and keep dark mode in sync.
Generate the @theme block
Enter your brand hex and copy the generated @theme block into your stylesheet. You get the full tonal range as --color-brand-* variables, which Tailwind v4 turns into utilities automatically: bg-brand-600, text-brand-700, border-brand-200. No config file, no plugin — v4 themes live in CSS.
Check the generated range before pasting: you want usable extremes (a near-white 50 for grounds, a near-black 950 for ink) and an action stop around 500–600 that passes white text. Regenerate from a slightly adjusted seed if the action stop fails — cheaper now than overriding later.
Use the scale like a system
Map roles to stops once and reuse them: surfaces from 50–100, borders from 200–300, actions at the passing stop, hover one step darker, ink from 900. When every component reads from the same stops, the interface gains the visual rhythm that scattered hex values never produce.
Resist arbitrary values (bg-[#3b82f680]) after setting up the theme — each one is a color decision made without the system's knowledge. If a value recurs twice, it belongs in the theme.
Keep dark mode honest
Tailwind's dark: variant switches utilities, not color sense — dark: variants pointing at the same stops will look wrong, because dark surfaces need lighter fills. Generate a proper dark palette and define its roles separately (raised surfaces get lighter, text goes to low-numbered stops), then point dark: utilities at those stops.
Verify the critical pairs in both modes: body text, action fills, borders against their grounds. Two modes, two measurement passes — the theme is only done when both read clean.
Tip
Name a reviewer 'dark-mode owner' for every PR that touches color. Unowned dark mode rots within a quarter.
Related free tools
Want to apply this right now? Open the color palette generator and try it with your own brand color — free, no sign-up.