Tailwind Color Generator

Input a base color and generate a full Tailwind-style color scale from 50 to 950. Preview swatches and copy as Tailwind config, CSS variables, or SCSS.

15.9Kuses

9.1/10(56)

Base Color

Color Name

Color Scale

Output

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': {
        50: '#f3f3fb',
        100: '#e6e6f9',
        200: '#c1c2f6',
        300: '#9193f2',
        400: '#5659f0',
        500: '#1418eb',
        600: '#0e11be',
        700: '#090b9a',
        800: '#070974',
        900: '#030553',
        950: '#020231',
        },
      },
    },
  },
};

Recommended Products

🎨Color GuidesShop →✏️Drawing TabletsShop →🖍️Color Pencil SetsShop →📚Design BooksShop →🎨Pantone BooksShop →💻Laptop StandsShop →🖱️Wireless MouseShop →🔌USB-C HubShop →👓Blue Light GlassesShop →🖥️Desk PadShop →

Affiliate Disclosure: As an Amazon Associate, ToolBird earns from qualifying purchases. Links above are affiliate links — if you buy through them, we may earn a small commission at no extra cost to you.

Disclaimer: This tool is provided as-is for informational and educational purposes only.