Enter one brand color and get a full scale from 50 to 950 in the same shape as Tailwind's own colors. The shades are built in OKLCH, a color space designed so that equal steps in lightness look equal to the eye, so the scale stays smooth and the hue does not drift. Copy the result as a Tailwind config, a Tailwind v4 theme, or plain CSS variables.
If you build shades by mixing a color with white and black, or by changing the lightness in HSL, the steps look uneven: yellows turn greenish, blues turn purple and some steps look far lighter than their neighbors. That happens because HSL lightness is a mathematical convenience, not a measure of how bright a color looks.
OKLCH was designed around human vision. Changing its lightness by the same amount produces a similar visible change for any hue, and changing chroma leaves the perceived hue alone. A scale made this way has even steps, which is what makes it comfortable to use for hover states, borders, backgrounds and text.
A scale from 50 to 950 is a menu. The lightest steps (50 to 200) suit backgrounds, tinted panels and subtle borders. The middle steps (400 to 600) are for buttons, links and icons. The darkest steps (800 to 950) work for text on light backgrounds and for dark mode surfaces. Sticking to this pattern keeps a site consistent without making color decisions on every page.
Always check contrast before you commit. White text on a 500 shade passes for some hues and fails for others, and the lightness that works for a yellow is very different from the one that works for a blue. The contrast columns show the numbers, so you can pick the first step that passes for your text size.
It converts your color to OKLCH, which splits a color into lightness, chroma (how colorful it is) and hue. The hue stays fixed. Lightness is spread from about 0.975 at step 50 down to about 0.24 at step 950, anchored so your color lands on the step you chose. Chroma follows a curve that is quieter at the very light and very dark ends. Each result is converted back to hex.
No. Tailwind's palettes were tuned by hand, so a generated scale is a close, consistent starting point rather than a copy. If you enter a built-in color such as #3b82f6 you will get a scale of the same character, with that exact color on the step you choose.
For Tailwind version 3 and earlier, use the config format and paste it into the colors section of tailwind.config.js. For Tailwind version 4, use the theme format and paste it into your main CSS file; classes such as bg-brand-500 then work. The CSS variable formats are for any project that does not use Tailwind.
They follow the WCAG formula: (lighter luminance + 0.05) divided by (darker luminance + 0.05). White against black is 21 to 1. The columns show each shade as text on a white background and on a black background, so you can see which steps are readable on which.
The palette calculations run in your browser. If you choose Continue with this brief, the reviewed colour tokens are sent to WeInc as part of your website brief.
Related: Color contrast checker, Hex color picker, Brand style guide generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.