HexColorPicker

    Tailwind & CSS Variable Generator

    Generate a full shade scale from any hex color, ready for Tailwind CSS config or CSS custom properties.

    Shade Preview

    50
    100
    200
    300
    400
    500
    600
    700
    800
    900

    Tailwind Config

    colors: {
  'primary': {
    50: '#e7f0fe',
    100: '#cee0fd',
    200: '#9ec1fa',
    300: '#6da2f8',
    400: '#3c83f6',
    500: '#0b64f4',
    600: '#0950c3',
    700: '#073c92',
    800: '#052861',
    900: '#021431'
  }
}

    CSS Variables

    :root {
  --color-primary-50: #e7f0fe;
  --color-primary-100: #cee0fd;
  --color-primary-200: #9ec1fa;
  --color-primary-300: #6da2f8;
  --color-primary-400: #3c83f6;
  --color-primary-500: #0b64f4;
  --color-primary-600: #0950c3;
  --color-primary-700: #073c92;
  --color-primary-800: #052861;
  --color-primary-900: #021431;
}

    How to Generate Tailwind CSS Color Scales

    Creating a consistent color scale is essential for modern web development. Tailwind CSS uses a numeric scale (50–900) to define color shades, where lower numbers are lighter and higher numbers are darker. Our generator automates this by calculating perceptually balanced shades from any base hex color.

    The generated output works directly in your tailwind.config.js file or as CSS custom properties. CSS variables are especially useful for theming and dark mode support, allowing you to swap entire palettes by changing variable values.

    Frequently Asked Questions