Comprehensive Guide & Reference: Tailwind CSS Color Scales & Mobile Design Systems
Color tokens form the visual foundation of web and mobile applications. Learn how to architect 11-step harmonic palettes across Tailwind CSS, CSS Custom Properties, Swift, and Kotlin.
1. The 11-Step Tailwind Color Hierarchy
| Step | Lightness | Recommended UI Application |
|---|---|---|
| 50 | 97% | Subtle card backgrounds, table row hover highlights, badge tints. |
| 100 | 93% | Badge backgrounds, notification alert containers, border accents. |
| 200–300 | 85%–75% | Decorative borders, subtle dividers, active toggle backdrops. |
| 400 | 64% | Secondary iconography, placeholder indicators, dark mode hover accents. |
| 500 | 52% | Primary Base: Solid buttons, brand logos, primary interactive elements. |
| 600–700 | 44%–36% | Button hover & active pressed states, high-contrast text on light backgrounds. |
| 800–900 | 28%–20% | High-contrast text headings, dark mode card containers. |
| 950 | 12% | Deep dark-mode surface backdrops, code block backgrounds. |
2. WCAG 2.1 Contrast Standards for Design Systems
Accessibility compliance ensures your digital products are legible to all users, including individuals with low vision:
- WCAG AA (Normal Text): Minimum contrast ratio of 4.5:1 against adjacent background colors.
- WCAG AA (Large Text ≥ 18pt / 24px): Minimum contrast ratio of 3.0:1.
- WCAG AAA (Enhanced Contrast): Minimum contrast ratio of 7.0:1 for normal body text and 4.5:1 for large headings.