Background usage for the colors/pastel-lavender|pastel-lavender palette — the shades that earn their place.
Recommended shades#
| Shade | Use it for |
|---|---|
| 50–100 | Page and panel backgrounds |
| 200–300 | Hover states, active rows |
| 500–600 | Buttons and fills |
| 800–950 | Dark sections and footers |
Example#
<div class="bg-pastel-lavender-600 hover:bg-pastel-lavender-500 text-white px-4 py-2 rounded-lg">Action</div>
<section class="bg-pastel-lavender-50 dark:bg-pastel-lavender-950 p-8">Tinted section</section>Dark mode#
Darken surfaces in dark mode: bg-pastel-lavender-50 → dark:bg-pastel-lavender-950.
Related#
colors/pastel-lavender|Pastel-lavender hub · colors/index|Color system