HomeTailwind Palette Generator

Tailwind Palette Generator

Generate 50-950 shades from a base color and export Tailwind config and CSS variables for branding and theming

Settings

Supports #RGB / #RRGGBB. Click any swatch to copy

Keeps letters/numbers/_/- for config key and CSS var prefix

Generated Shades

Click a swatch to copy HEX

50
100
200
300
400
500
600
700
800
900
950

Exports

Tailwind Config
colors: {
  primary: {
    50: '#D4FFFF',
    100: '#AEF5FF',
    200: '#88CFFF',
    300: '#6EB5FF',
    400: '#559CFF',
    500: '#3B82F6',
    600: '#2269DD',
    700: '#084FC3',
    800: '#00299D',
    900: '#000377',
    950: '#000050',
  }
}
CSS Variables
:root {
  --primary-50: #D4FFFF;
  --primary-100: #AEF5FF;
  --primary-200: #88CFFF;
  --primary-300: #6EB5FF;
  --primary-400: #559CFF;
  --primary-500: #3B82F6;
  --primary-600: #2269DD;
  --primary-700: #084FC3;
  --primary-800: #00299D;
  --primary-900: #000377;
  --primary-950: #000050;
}
All Colors
50: #D4FFFF
100: #AEF5FF
200: #88CFFF
300: #6EB5FF
400: #559CFF
500: #3B82F6
600: #2269DD
700: #084FC3
800: #00299D
900: #000377
950: #000050

Related Tools

Color Palette Generator
Image Palette Extractor
Random Color Generator
Color Naming
CSS Gradient Text Generator
CSS Gradient Generator
Color Picker/Converter
Background Pattern Generator

Documentation

About Tailwind Palette Generator

This tool generates Tailwind-style shades (50-950) from a base color, then outputs both Tailwind config snippets and CSS variables.

Core Features

  • Base color input: color picker and HEX text input.
  • Automatic shade generation: creates 11 normalized shades from light to dark.
  • Palette key normalization: sanitizes palette names for safe config keys.
  • Multiple outputs: Tailwind colors config, CSS variables, and full color list.
  • Quick copy actions: copy single shade, full palette, or specific output block.

How To Use

  1. Choose a base color and define a palette name.
  2. Review generated shades from 50 to 950.
  3. Copy Tailwind config or CSS variables into your project.
  4. Use consistent token names in components.

Typical Use Cases

  • Bootstrapping or iterating a design system theme.
  • Adding brand colors to Tailwind projects quickly.
  • Maintaining both Tailwind tokens and native CSS variables.

FAQ

Why is my HEX value invalid?

Use 3-digit or 6-digit HEX with #, for example #3B82F6.

Why are shades not exactly the same as design files?

The tool generates shades algorithmically. Treat output as a strong baseline and fine-tune key steps if needed.

Data is processed locally in your browser by default and will not be uploaded to any server. Upload will be clearly indicated if required.

© 2026 See-Tool. All rights reserved. | Contact Us