Tailwind Color Scale Generator

Generate a Tailwind-style color scale (50-950) from a base HEX color.

Base Color (HEX)

Generated Scale

Tailwind Config

tailwind.config.js

theme: {
  extend: {
    colors: {
      primary: {
        50: '#F4F8FA',
        100: '#E7F2F9',
        200: '#C2E2F4',
        300: '#91CFF3',
        400: '#51B9F6',
        500: '#00A2FF',
        600: '#0081CC',
        700: '#0067A3',
        800: '#004E7A',
        900: '#002D47',
        950: '#00131F',
      }
    }
  }
}

CSS Variables

--color-primary-50: #F4F8FA;
--color-primary-100: #E7F2F9;
--color-primary-200: #C2E2F4;
--color-primary-300: #91CFF3;
--color-primary-400: #51B9F6;
--color-primary-500: #00A2FF;
--color-primary-600: #0081CC;
--color-primary-700: #0067A3;
--color-primary-800: #004E7A;
--color-primary-900: #002D47;
--color-primary-950: #00131F;

About Tailwind Color Scales

Tailwind CSS uses a systematic approach to color palettes. Each color scale ranges from 50 (lightest) to 950 (darkest), with 500 being the base color. This creates consistent, usable color systems that work well across UI designs. The 500 level typically represents your base color, while lighter shades work well for backgrounds and darker shades for emphasis and text.