Tailwind uses a numbered color scale from 50 (lightest) to 950 (darkest):
Color scale:
50
- Very light tint100
, 200
, 300
- Light shades400
, 500
, 600
- Medium shades (500 is the base)700
, 800
, 900
- Dark shades950
- Very dark shadeUsage examples:
bg-blue-500
- Blue background (medium blue)text-gray-700
- Dark gray textborder-red-200
- Light red borderThis system provides consistent color relationships across your design.