Add a brand color in Tailwind v4
Name the palette brand, export @theme, and place the generated block in a stylesheet that imports Tailwind. Variables such as --color-brand-500 make color utilities such as bg-brand-500 available.
Start with your brand color
Your color stays exactly at 500. Other shades vary perceptual lightness in OKLab and reduce chroma when needed to fit sRGB. This is a custom scale, not Tailwind’s official color set.
Ready-to-use tokens
11 shades · click a color to copy
Text automatically uses black or white, whichever has higher WCAG contrast. Ratios shown apply only to that swatch/text pair. Check your actual UI combinations separately. Near-white or near-black bases may produce repeated shades.
Generated mathematically in your browser without external color datasets or network requests. Tailwind CSS is a third-party framework; this tool generates compatible custom tokens.
How to use the Tailwind Color Palette Generator
- 01
Enter a 3- or 6-digit hex color or use the color picker. Your input becomes shade 500.
- 02
Give the color a lowercase name such as brand or ocean-blue.
- 03
Review the 11 shades and their black-or-white label contrast ratios.
- 04
Copy or download Tailwind v4 @theme variables, Tailwind v3 config, CSS variables, or JSON.
Examples
Extend a Tailwind v3 project
Choose the v3 config export, then merge its theme.extend.colors entry into your existing configuration. Keep the project’s other settings and plugins.
Use the same scale without Tailwind
Export CSS variables and use color: var(--brand-700) or background: var(--brand-50). JSON is useful for design-token scripts or other styling systems.
How the shades are generated
The generator converts the base sRGB color into OKLab, varies its perceptual lightness toward white or black, and tapers chroma toward the endpoints. Colors outside the sRGB gamut have their chroma reduced until they fit. The original hex value is preserved at 500. These are custom shades generated by this tool, not the official Tailwind default palette.
Choosing a useful starting color
A midtone base usually leaves more room for distinct light and dark steps. Very light bases have little room above 500; very dark bases have little room below it. Pure white and black, and nearby colors, can therefore produce duplicate shades. Review the sequence visually before treating it as a finished design system.
Contrast is a relationship
Each swatch shows its contrast against black or white, choosing whichever is higher. That number describes only the swatch and its displayed label. It does not approve combinations between generated shades. Evaluate real interface pairs, including hover states, borders, disabled controls, and text sizes.
What to know
- The scale is a starting point for visual review, not a guarantee of accessible UI combinations.
- Output is limited to opaque sRGB hex colors; extreme bases may produce repeated shades.
Common questions
Does this reproduce Tailwind’s built-in colors?
No. It creates an original custom scale with familiar Tailwind shade numbers. The export formats integrate with Tailwind, but the colors do not copy the framework’s default palettes.
Why does shade 500 stay unchanged?
Keeping your supplied color exactly at 500 makes the output predictable for an existing brand. Other shades are derived around that anchor.
Can I use a named color, RGB, or alpha hex?
This version accepts only opaque 3- or 6-digit hex values. Convert other formats to an opaque sRGB hex color first.
Does the export replace my configuration?
The v3 download is an example configuration object to merge into your project. The v4 download is an @theme block to add to your Tailwind stylesheet. Review existing names to avoid overwriting tokens.