Input a brand color and auto-generate a full 50-950 Tailwind CSS color palette with dark mode support.
Enter one hex value and the tool returns the full eleven-step Tailwind scale - 50 through 950 - with the input color anchoring the middle of the ramp: lighter stops blend toward white, darker stops toward black. Output comes back as named hex pairs plus dark-scheme variants, formatted for pasting into a Tailwind theme configuration. The recurring surprise is that the ramp is geometric, not Tailwind's tuned default palette: the lightest stops wash out the brand's saturation, the darkest stop can look muddy, and only the anchor matches your hex exactly. Treat the result as a starting point rather than a finished palette.
The entered hex anchors the scale, conventionally at the 500 stop. Each stop below the anchor is that color blended toward white in increasing proportion; each stop above is the anchor blended toward black. The tool fixes a blend proportion for every stop, so the eleven values run from a near-white 50 through the brand color at 500 to a near-black 950, each rendered as hex for the output.
The stops are named to match Tailwind's scale - 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 - and returned as a named group of hex values ready to substitute for a default palette in theme configuration. Dark-scheme variants come alongside the light values, so the same scale can serve both themes. Individual stops can be lifted out too, for example 600 as a hover color.
At the anchor stop, usually 500, yes: the generated hex matches what you entered. The other ten stops are derived, so they will not match hexes you had hand-tuned. Some generators adjust even the anchor to keep the ramp evenly spaced, so compare the 500 value with your input before treating it as authoritative.
No. Tailwind ships hand-tuned scales that balance lightness and chroma per hue; this tool blends your single input toward white and black, which changes perceived saturation as the ramp darkens. Use the generated palette where the brand color must lead. Where you want the stock Tailwind look, keep the defaults and reserve the generated scale for brand accents.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.