justyourpaletteTailwind Color Generator
Turn one brand color into a full 50 to 950 scale.
- 100% Free
- No Sign Up
- Works in Your Browser
Tailwind color generator
Make a 50-950 Tailwind color scale from one color
More Color Tools
View all tools- Shades generatorTints, shades and tones of any color
- Color mixerMix two colors and see every step between them
- Palette generatorGenerate color palettes and lock the ones you like
- Color pickerPick a color and copy it as hex, RGB or HSL
- Contrast checkerCheck text and background contrast against WCAG
- Hex to RGBConvert hex color codes to RGB values
- Palette from imageExtract a color palette from any photo
- Image color pickerClick any pixel in a photo to get its color code
- Color wheelFind color harmonies on an interactive wheel
Every everyday color tool, right in your browser.
No software. No uploads. No signup.
Browse all 28 tools- Color tools
- 28
- Named colors
- 139
- Curated palettes
- 216
How to use the tailwind color generator
Three steps, all in your browser.
- 1
Pick a base color
Type a code or use the picker to set the starting color.
- 2
Set the steps
Choose the steps or the mix ratio. The colors update instantly.
- 3
Copy the codes
Copy any color code in one click, or share the page link.
Tailwind Color Generator: what to know
The Tailwind color generator turns one brand color into a full Tailwind CSS scale: 50, 100, 200 through 900 and 950. Copy it as a Tailwind v4 @theme block of --color-* variables, and classes like bg-brand-500 and text-brand-700 work right away.
The scale is built in OKLCH, the same perceptual color space Tailwind v4 uses for its default palette. Lightness steps evenly from a near-white 50 to a very deep 950, while chroma eases off at the light and dark ends, where sRGB can't hold strong color. The result behaves like the built-in palettes: 50 to 200 for backgrounds, 500 to 600 for buttons, 700 to 950 for text.
Your exact color is kept in the scale, so your brand color appears unchanged where it fits best, and the steps around it follow from it.
Popular uses
- Adding a brand color to a Tailwind project
- Building a design-system color scale
- Creating matching light and dark theme tokens
- Replacing hand-picked shades with an even scale
Tips for the best result
- Check which step passes 4.5:1 with white for buttons; it's often 600 or 700, not 500.
- Generate scales for your neutral gray too, slightly tinted with your brand hue.
- Name colors by role (brand, accent) rather than hue so you can change them later.
Read how JustYourPalette works, browse named colors and curated palettes, and see our privacy details. Colors you enter and images you open are processed in your browser and are never sent to our server.