--- title: "Tailwind Palette Generator - Custom Color Scale | CanDoYa" description: "Generate an 11-shade Tailwind color palette from any hex. Preview every 50-950 shade and copy Tailwind v4, v3, CSS, or JSON code." url: https://candoya.com/tools/tailwind-palette-generator/ locale: en type: browser-tool --- # Tailwind Palette Generator Category: Color & Design ## What is a Tailwind palette generator? A Tailwind palette generator turns one brand color into a complete 11-step scale from 50 to 950. Choose which shade keeps your exact input, preview the result on light and dark surfaces, then copy the palette as Tailwind v4 theme variables, a v3 config object, CSS variables, or JSON. Tailwind projects need more than one brand hex. Hover states, subtle backgrounds, borders, readable text, and dark themes all need related shades. This tool creates that ladder in **perceptually uniform OKLCH color space**, reduces chroma when a generated shade falls outside the sRGB gamut, and keeps your chosen anchor color byte-for-byte. Tailwind v4 uses `@theme` variables in the `--color-*` namespace. The v4 export follows that convention with OKLCH values, while the v3 export produces an `extend.colors` object with hex values. ## How to use it 1. **Enter your base color** - Type a 3- or 6-digit hex value or use the color picker. The 11 shades update instantly. 2. **Choose the anchor shade** - Select the step that must equal your exact input. Shade 500 is the common default, while 400 or 600 may fit lighter or darker brand colors. 3. **Name and inspect the scale** - Set a lowercase token name, then click individual swatches to copy hex values and check the light and dark previews. 4. **Copy the right format** - Choose Tailwind v4, Tailwind v3, CSS variables, or JSON and copy the complete code block. ## Who it's for - **Front-end developers** extending a Tailwind theme with a custom brand or product color. - **Design-system teams** turning an approved hex into consistent background, border, hover, and text tokens. - **Product designers** testing one scale across both light and dark interface surfaces before handing it to engineering. - **Agencies** creating copy-ready Tailwind, CSS, or JSON tokens for several client identities. ## Expert note A generated scale is a strong starting point, not a claim that every adjacent pair is accessible. Test the exact foreground and background combinations you plan to ship, especially mid-range shades around 400 to 700, because WCAG contrast depends on the pair rather than the shade number. ## Frequently asked questions ### Is this Tailwind palette generator free? Yes. You can generate and copy unlimited color scales without an account, watermark, or paid export. Every format shown in the workspace is available immediately. ### Is my brand color uploaded anywhere? No. Palette generation and export formatting run entirely in your browser. The hex value and color name you enter are not sent to a processing server. ### What shades does a Tailwind color palette include? A current Tailwind color family normally contains 11 numbered steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. Lower numbers are lighter and higher numbers are darker. ### Does the base color have to be shade 500? No. Shade 500 is a useful default, but you can anchor your input at any step from 50 to 950. The generator keeps that anchor exact and redistributes lighter and darker steps around it. ### Should I use Tailwind v4 or v3 output? Use the Tailwind v4 export for projects configured with CSS-first `@theme` variables. Use the v3 export when your project still extends colors in `tailwind.config.js`. CSS variables and JSON are framework-neutral alternatives. ### Why does the generator use OKLCH? OKLCH makes lightness changes more visually even than simple RGB or HSL mixing. It also separates lightness, chroma, and hue, so the generator can shape a readable ladder while preserving the character of your base color. ### Are generated Tailwind shades automatically accessible? No shade number guarantees accessible contrast. The preview helps you inspect the scale, but you should test every real text and background pair against the WCAG target your product requires. ## Related tools - [Color Palette Generator](https://candoya.com/tools/color-palette-generator/) - [Accessible Palette Generator](https://candoya.com/tools/accessible-palette-generator/) - [Color Contrast Checker](https://candoya.com/tools/color-contrast-checker/) - [Color Picker](https://candoya.com/tools/color-picker/) - [HEX to HSL Converter](https://candoya.com/tools/hex-to-hsl/) --- *Markdown edition of , published for AI agents and other automated readers. Index of key pages: .*