Skip to content
XUtilHub

Tailwind Color Shades Generator – 50 to 950 Palette from One Color

Turn one brand color into a full 50–950 shade scale like Tailwind's. Balanced OKLCH shades, exported for Tailwind v4, v3, CSS variables and SCSS.

  • Free, no sign-up
  • Runs in your browser, nothing uploaded

About the Color Shades Generator

Enter your brand color and get eleven balanced shades from 50 to 950, just like Tailwind's built-in palettes. Your exact color is kept, and the scale can be copied for Tailwind v4, Tailwind v3, CSS variables or SCSS.

Key features

  • 11 shades, 50 to 950
  • Keeps your exact brand color
  • Balanced OKLCH lightness
  • Tailwind v4 and v3 export
  • CSS and SCSS variables
  • Click any shade to copy

One color in, a full palette out

Design systems need more than one shade of each color: light tints for backgrounds, mid tones for buttons and dark shades for text. Enter your brand color and get a complete scale that matches Tailwind's naming.

Which shade for what?

ShadesTypical use
50–100Page and card backgrounds, hover states
200–300Borders, dividers, disabled states
400–600Buttons, links, icons, brand accents
700–800Text on light backgrounds, hover on buttons
900–950Headings, dark mode backgrounds

Check text and background pairs, such as 700 on 50, with the contrast checker.

Color palette generator, contrast checker and color picker.

How to use the Color Shades Generator

  1. Enter a color code, use the picker, or start from a preset.
  2. Adjust the options; the preview updates instantly.
  3. Check the result, including contrast and how it looks in context.
  4. Copy the CSS, Tailwind or HEX code, or download it.

Frequently asked questions

How do I add the colors to Tailwind v4?

Paste the @theme block into your main CSS file after @import "tailwindcss". You can then use classes like bg-brand-500 and text-brand-900.

How do I add them to Tailwind v3?

Paste the object into theme.extend.colors in tailwind.config.js. The classes work the same way, for example bg-brand-500.

Why isn't my color at 500?

Your color is placed on the step whose lightness matches it best, the way Tailwind's own palettes work. A light yellow might land on 200, and a dark navy on 800.

What is OKLCH?

A modern color space designed to match how people see lightness. Shades spaced evenly in OKLCH look evenly spaced to the eye, unlike HSL, where yellow looks much lighter than blue at the same value.

Are these design tools free?

Yes. Every tool is free with no sign-up, and you can use the colors and code in personal and commercial projects.

Do you upload my images?

No. The color blindness simulator and every other tool run entirely in your browser, so your images and colors stay on your device.

Which code formats can I copy?

HEX, RGB and HSL values, plain CSS, CSS variables, SCSS variables, and Tailwind classes or theme config for both Tailwind v3 and v4.

What is a good contrast ratio?

WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text, icons and borders. AAA asks for 7:1 for normal text.

Last updated:

Related Design tools

Color Blindness SimulatorNEW

Upload an image to see how people with deuteranopia, protanopia, tritanopia and achromatopsia see it. Side by side, scientifically based, no upload.

Color Name FinderNEW

Find the name of any color from its HEX, RGB or HSL code. See the closest CSS color names and common names, plus a list of all 148 CSS colors.

Contrast CheckerNEW

Check the contrast ratio between text and background colors against WCAG 2 AA and AAA, with a live preview and one-click fixes that pass.

Color Palette GeneratorNEW

Generate beautiful 5-color palettes: random, analogous, monochrome, complementary, triadic, pastel or earthy. Lock colors, press space, export CSS or PNG.

CSS Gradient GeneratorNEW

Create CSS gradients visually: linear, radial or conic, with up to 8 color stops, angle control and presets. Copy the CSS or Tailwind class.

Box Shadow GeneratorNEW

Create CSS box shadows visually with multiple layers, blur, spread, opacity and inset. Presets for soft, layered, glow and neumorphic shadows.