Tailwind Color Palette Generator

Generate custom Tailwind CSS color palettes. Create color scales from a base color with proper naming. Export as Tailwind config.

Color (hex or rgb)

Color Name

Picker

Generated Palette

Tailwind Config

colors: {
  'custom': {
    50: '#f1f1fe',
    100: '#e3e3fc',
    200: '#bdbff9',
    300: '#8f91f5',
    400: '#575af0',
    500: '#151aea',
    600: '#1215c5',
    700: '#0e119f',
    800: '#0b0d7a',
    900: '#080a5e',
    950: '#050638',
  }
}

About Tailwind Color Palette Generator

Tailwind CSS uses a numeric shade system from 50 (lightest) to 950 (darkest) for its color palettes. This tool generates a complete palette from any single base color, making it easy to create custom design systems that follow the Tailwind convention. Each shade includes WCAG contrast ratio calculations so you can ensure your color choices are accessible. The generated palette can be exported directly as a Tailwind config object, ready to paste into your tailwind.config.js file.

Understanding the Tailwind CSS Color System: Shades, Custom Palettes and Accessibility

Learn how Tailwind CSS organizes colors into shade scales, how to add custom palettes, generate balanced color ramps and ensure WCAG accessibility in dark and light modes.