Overview
A brand color expander that turns one hex value into the full eleven-step Tailwind shade ramp, 50 through 950, with your exact color pinned at 500. Lighter shades mix toward white and darker ones toward a soft near-black, and the tool emits a ready-to-paste tailwind.config.js extend block under a token name you choose.
How It Works
Pick or type the base hex color, and enter a token name such as brand; the field lowercases and strips characters that are invalid in a config key. Eleven swatches render in a grid, and clicking any swatch copies its hex directly. The code panel shows the module.exports block with the shades nested under theme.extend.colors and your token name, ready to copy into tailwind.config.js.
Step-by-Step Usage Guide
- Pick the base color with the picker or hex field.
- Name the token, for example brand or accent.
- Click a swatch to copy any individual shade.
- Copy the tailwind.config.js block and paste it under theme.extend.colors.
Technical Specifications & Standards
Shade 500 is your base color byte-for-byte; everything else is a linear mix in sRGB space. Shades 400 down to 50 blend the base with pure white at weights falling from 0.2 to 0.92, while 600 through 950 blend with a near-black anchor of RGB 10, 15, 30 at weights rising from 0.2 to 0.9; the slightly blue-tinted black keeps deep shades from turning dead grey. Because the mixing is linear sRGB, the ramp differs from Tailwind's own v4 palettes, which are authored in OKLCH for perceptual uniformity: equal numeric steps in sRGB do not look equally spaced to the eye, so mid ramps can feel abrupt. That is the price of a zero-dependency computation from a single seed; if the ramp looks uneven, nudge the base or adjust individual shades after copying.
Targeted Use Cases
- Adding a brand color to a Tailwind project in one paste.
- Generating hover (600-700) and subtle-background (50-100) shades from a logo color.
- Building a full ramp for charts and status colors from one seed.
- Naming tokens consistently across a design system.
Notes & Gotchas
- Check text contrast on the 400 to 600 shades before using them as button backgrounds.
- Use 50 and 100 for tinted surfaces and 800 to 950 for dark-mode accents.
- Keep the token name stable once shipped; renaming it breaks every class that references it.
- If the ramp feels uneven, remember the mixing is linear sRGB, not OKLCH like Tailwind's built-in palettes, and adjust shades manually.
Frequently Asked Questions
Which shade is my exact input color?
Shade 500. It is emitted byte-for-byte from your hex input; every other step is a computed mix toward white or near-black.
How are the shades computed?
By linear interpolation in sRGB. Lighter steps mix with white at weights from 0.2 to 0.92, darker steps mix with RGB 10, 15, 30 at weights from 0.2 to 0.9, and every channel is clamped and rounded to hex.
Why do the shades look different from Tailwind's built-in colors?
Tailwind v4 authors its default palettes in OKLCH, a perceptually uniform space, while this tool mixes in sRGB. The ramps are usable but the perceptual spacing differs, so mid steps can feel compressed.
Where does the config snippet go?
Paste the colors object under theme.extend.colors in tailwind.config.js. After rebuilding, utilities like bg-brand-500 and text-brand-700 become available.