Tailwind CSS Color Generator

Base Color

Generated Shades

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#e7f0fe',
          100: '#c0d7fc',
          200: '#99befa',
          300: '#72a5f8',
          400: '#4b8df7',
          500: '#5593f7',
          600: '#3780f6',
          700: '#1a6ef4',
          800: '#0b5ee5',
          900: '#0952c8',
        }
      }
    }
  }
}

:root {
  --color-primary-50: #e7f0fe;
  --color-primary-100: #c0d7fc;
  --color-primary-200: #99befa;
  --color-primary-300: #72a5f8;
  --color-primary-400: #4b8df7;
  --color-primary-500: #5593f7;
  --color-primary-600: #3780f6;
  --color-primary-700: #1a6ef4;
  --color-primary-800: #0b5ee5;
  --color-primary-900: #0952c8;
}

const colors = {
  primary: {
    50: '#e7f0fe',
    100: '#c0d7fc',
    200: '#99befa',
    300: '#72a5f8',
    400: '#4b8df7',
    500: '#5593f7',
    600: '#3780f6',
    700: '#1a6ef4',
    800: '#0b5ee5',
    900: '#0952c8',
  }
}

Usage Examples

<button className="bg-primary-500 text-white px-4 py-2 rounded">
  Primary Button
</button>

<div className="text-primary-700">Dark Text</div>

<div className="bg-primary-100 px-4 py-2 rounded">
  Light Background
</div>

.btn {
  background-color: #3B82F6;
  color: white;
}

.text-primary {
  color: #3B82F6;
}

.bg-primary-light {
  background-color: #c0d7fc;
}