colorize
ColorKit
CK

Tailwind Color Generator

Enter your brand's primary color, and we'll generate a mathematically balanced 50-950 scale for Tailwind CSS v3 or v4.

Generated Scale

50

#F1F6FD

100

#E2ECFC

200

#C2D7F9

300

#9EC0F7

400

#75A6F6

500

#3B82F6

600

#1468F0

700

#0F50B9

800

#0C3679

900

#071938

950

#030A17

Component Preview

Buttons

Alerts & Badges

System Update

The server will restart in 5 minutes. (50/500/700/900)

Badge (100/800)Solid (600)

How Tailwind Shades Work

Tailwind CSS uses a 50-950 lightness scale to establish a flexible design system.

  • 50 - 100: Super light backgrounds and tinted panels.
  • 200 - 400: Subtle borders, inactive states, and hover effects.
  • 500 - 600: Primary actions, solid buttons, and active states.
  • 700 - 950: Dark text, high-contrast badges, and deeply tinted dark-mode elements.

Our mathematical generator anchors your chosen HEX code exactly at the 500 index, then interpolates lightness and saturation curves towards pure white (50) and near-black (950) to mimic the official Tailwind color palettes.

Knowledge Base & FAQ

Frequently Asked Questions

Direct answers and solutions to common questions, technical challenges, and industry standards.

How does Tailwind CSS calculate its 50–950 shade scale?expand_more
Tailwind's numeric scale organizes colors from lightest to darkest:
  • 50–100: High-lightness pastel tints (~95% to 90% lightness) for card backgrounds and alerts.
  • 200–400: Soft mid-tones for borders, dividers, disabled states, and hover backgrounds.
  • 500–600: The base brand hue (500) and hover state (600) for primary buttons and focal UI.
  • 700–900: Deep shades for body text, headings, and high-contrast dark-mode surfaces.
  • 950: Ultra-dark near-black tint (~5% to 10% lightness) for dark mode panels and high-contrast UI chrome.
How do I add custom color shades to Tailwind CSS v3 vs Tailwind CSS v4?expand_more
In Tailwind CSS v3 (JavaScript Config): Add your generated scale inside tailwind.config.js: 
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#F0F9FF',
          100: '#E0F2FE',
          500: '#0EA5E9',
          900: '#0C4A6E',
        }
      }
    }
  }
}
In Tailwind CSS v4 (Pure CSS): Declare them directly in your CSS using the @theme directive: 
@theme {
  --color-brand-50: #F0F9FF;
  --color-brand-500: #0EA5E9;
  --color-brand-900: #0C4A6E;
}
Why does simply adding black or white make custom shades look washed out?expand_more
Linear tinting (mixing white) and shading (mixing black) flattens chromatic saturation, resulting in muddy, chalky pastels and murky darks. Professional Tailwind color palettes implement hue shifting: as colors get lighter, their hue subtly shifts toward warmer light (like sunlight), and as they get darker, their hue shifts toward cooler shadows (like sky ambient light), preserving vivid chromatic energy across the entire scale.
Which Tailwind shade should I use for headings, body copy, and borders?expand_more
Standard design system hierarchy recommendations:
  • Headings (H1–H3): text-slate-900 or text-neutral-900 for maximum contrast.
  • Body Paragraphs: text-slate-700 or text-neutral-600 for comfortable extended reading.
  • Secondary Captions / Timestamps: text-slate-500.
  • Card & Input Borders: border-slate-200 (light mode) and border-slate-800 (dark mode).