A quick visual reference for Tailwind CSS colors with their recommended dark mode counterparts. Bookmark this page — you'll use it constantly.
Neutral Colors (Most Used)
| Use Case | Light | Dark |
|---|---|---|
| Page BG | bg-white | dark:bg-neutral-950 |
| Alt BG | bg-neutral-50 | dark:bg-neutral-900 |
| Card BG | bg-white | dark:bg-neutral-900 |
| Heading | text-neutral-900 | dark:text-white |
| Body | text-neutral-600 | dark:text-neutral-400 |
| Muted | text-neutral-500 | dark:text-neutral-400 |
| Border | border-neutral-200 | dark:border-neutral-800 |
| Divider | bg-neutral-100 | dark:bg-neutral-800 |
Accent Colors
For buttons, links, badges, and highlights. Use the 600 shade in light mode, 400 in dark mode for proper contrast.
| Color | Light Text | Dark Text | Light BG | Button |
|---|---|---|---|---|
| Indigo | text-indigo-600 | dark:text-indigo-400 | bg-indigo-50 | bg-indigo-600 |
| Emerald | text-emerald-600 | dark:text-emerald-400 | bg-emerald-50 | bg-emerald-600 |
| Rose | text-rose-600 | dark:text-rose-400 | bg-rose-50 | bg-rose-600 |
| Amber | text-amber-600 | dark:text-amber-400 | bg-amber-50 | bg-amber-600 |
| Violet | text-violet-600 | dark:text-violet-400 | bg-violet-50 | bg-violet-600 |
Button Patterns
<!-- Primary -->
<button class="bg-indigo-600 hover:bg-indigo-700 text-white">
<!-- Secondary -->
<button class="border border-neutral-300 dark:border-neutral-600 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800">
<!-- Ghost -->
<button class="text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800">💡 Pro tip: Text on colored backgrounds (buttons, badges, gradient sections) should always be white — no need for dark:text-white since the background color doesn't change between modes.