Build an eleven-step perceptual ramp
A single brand color is rarely enough for a production interface. Components need pale surfaces, subtle borders, default actions, hover states, and deep text or dark-mode fills. HueWiz creates shades 50 through 950 by varying lightness and chroma in OKLCH, a cylindrical form of the perceptual OKLab color space. Hue stays near the starting hue while the light and dark ends are adjusted for useful range.
The generated ramp is an original project scale, not a copy of Tailwind’s default palette. Your exact starting color is exported as the semantic primary token rather than silently pretending it is always shade 500. Review the whole sequence on the devices your audience uses; no algorithm can infer every brand requirement from one swatch.
Why OKLCH helps with shade generation
HSL is convenient but its numeric lightness is not perceptually even. A yellow and a blue with the same HSL lightness can appear dramatically different. OKLCH separates perceived lightness, chroma, and hue more consistently, which makes it better suited to building steps that feel ordered instead of producing sudden visual jumps.
Some OKLCH combinations fall outside the standard sRGB gamut used by most CSS hex colors. HueWiz brings those results into gamut by reducing chroma while preserving the intended lightness and hue as closely as practical. This can make an extreme shade less saturated than expected, but it avoids exporting clipped channel values that collapse distinct steps into the same display color.
Use the export with Tailwind CSS v4
Select Tailwind v4 and copy or download the output. It includes an @import "tailwindcss"; statement and an @theme block containing --color-* variables. Use the downloaded file as the project’s CSS entry point, or copy only the theme variables into an existing entry point so the Tailwind import is not duplicated.
Theme variables become utility classes. For example, --color-brand-600 enables utilities such as bg-brand-600 and text-brand-600. Semantic tokens describe purpose more clearly than shade numbers: a page can use bg-surface text-ink, while a primary action can use bg-primary text-on-primary. HueWiz supplies black-or-white on-color tokens, but you should still test the final component, including font size and state changes.
Migrating from Tailwind v3
Tailwind v3 commonly extends colors inside tailwind.config.js. Tailwind v4 moves much theme configuration into CSS. Migrate deliberately: inventory existing color names, map frequently used aliases to the new variables, and search the codebase for hard-coded hex values before removing the old configuration. Keep compatibility aliases during a staged migration when several components depend on the older names.
The named-color reference pages include clearly labeled v3 examples for projects that have not moved. Do not paste a v4 @theme block into a v3 build and assume the framework will generate utilities from it. Follow the documentation for the version installed in your project.
Light mode, dark mode, and component states
A shade ramp is a set of primitives. Connect those primitives to semantic roles for each theme instead of reversing the scale mechanically. A light surface may use a very pale step with a deep ink color; a dark surface may use a deep neutral and a pale ink color. Primary actions can use different ramp steps in each theme while preserving a recognizable hue.
Define hover, active, focus, selected, and disabled colors alongside the default state. Check text contrast on every filled state and non-text contrast for focus rings and component boundaries. Saturated colors often need different lightness adjustments in dark mode to avoid glare. Preview the roles in context, then validate important pairs with the contrast checker.
Maintainable color tokens
Keep primitive ramp names separate from semantic names. Components should usually consume roles such as surface, primary, or danger; the theme layer decides which primitive shade fulfills each role. This makes rebranding and dark-mode changes possible without editing every component.
Document the exact base color, generation date, intended pairs, and any manual adjustments. The export is a starting system, not a substitute for visual review. See Tailwind’s official color documentation, browse the CSS named-color library, or return to the HueWiz palette studio to refine the five interface roles.