Pastel-lavender is one of the color families shipped with this release. Dreamy violet from the v1 pastel family..
Shades#
50100200300400500600700800900950
Palette table#
| Shade | Class fragment | Value | Best role |
|---|---|---|---|
50 | pastel-lavender-50 | #c9b3e6 | Lightest tint — page backgrounds, subtle fills, hover backgrounds for rows and list items. |
100 | pastel-lavender-100 | #c9b3e6 | Very light — section backgrounds, badges on light UI, tinted code blocks. |
200 | pastel-lavender-200 | #c9b3e6 | Light — borders on light themes, dividers with personality, chip backgrounds. |
300 | pastel-lavender-300 | #c9b3e6 | Soft — secondary borders, disabled states with color, placeholder decorations. |
400 | pastel-lavender-400 | #c9b3e6 | Medium-light — icons on dark surfaces, decorative accents, chart lines. |
500 | pastel-lavender-500 | #c9b3e6 | The primary step — buttons, links, brand fills, key interactive elements. |
600 | pastel-lavender-600 | #c9b3e6 | Hover step — hover states for 500 elements, or primary on very light UIs. |
700 | pastel-lavender-700 | #c9b3e6 | Active step — pressed states, emphasized text on light tinted backgrounds. |
800 | pastel-lavender-800 | #c9b3e6 | Dark — text on light palettes, headers in tinted sections, dark UI fills. |
900 | pastel-lavender-900 | #c9b3e6 | Very dark — deep section backgrounds, high-contrast text carriers. |
950 | pastel-lavender-950 | #c9b3e6 | Darkest — near-black tinted backgrounds, hero surfaces, footer tones. |
Use it#
<div class="bg-pastel-lavender-500 text-white p-6 rounded-xl">Pastel-lavender surface</div>
<p class="text-pastel-lavender-600 dark:text-pastel-lavender-400">Adaptive text</p>
<div class="border border-pastel-lavender-200 dark:border-pastel-lavender-800 bg-pastel-lavender-50 dark:bg-pastel-lavender-950 p-4 rounded-lg">Panel</div>Per-usage guides#
Pastel-lavender textstext-pastel-lavender-* in practice.Pastel-lavender backgroundsbg-pastel-lavender-* in practice.Pastel-lavender bordersborder-pastel-lavender-* in practice.Pastel-lavender gradientsfrom-pastel-lavender-* in practice.
Contrast#
Flip point: shades 50–400 want dark text (text-slate-900); shades 500+ want white text. Verify with the accessibility/color-contrast|contrast guide.
Related palettes#
colors/pastel-rose|pastel-rose · colors/pastel-mint|pastel-mint · colors/color-pairing|Pairing recipes