Modern design systems don't just have "one red" or "one blue." They have 10–12 shades of each color, named numerically (50–950). This is how you get hover states, dark modes, and accessible contrast.
Tailwind CSS
most popular system
red-50
red-500
red-900
Numeric scale, 50 = lightest, 950 = darkest. Used by 90% of modern web apps.
Material Design
google
red-100
red-A200
red-A700
Same numeric idea but with "A" prefix for accent variants. Used in Android apps.
Radix Colors
designer-friendly
red1 (subtle bg)
red9 (solid)
red12 (text)
12-step scale where each number has a specific UI purpose (bg, border, text).