Lavender Fields color palette
Five purples move from a whisper of lilac, #E8D5F5, to a saturated royal purple, #5C1A9B. The light end is soft and powdery, and the dark end has real depth, so the set covers both background and text without bringing in another hue. It reads calm and a little floral. Lavender farms, sleep apps, skincare lines and bridal showers suit it, as does most anything sold in spring.
Lavender Fields palette in use
Make #E8D5F5 the background and set text in #5C1A9B. #7B2FBE fits primary buttons, and #C9A7EB works for borders, tags and illustration fills.
This pair measures 7.35:1, so it works for body text too. The button uses #7B2FBE with white text.
ButtonGood for
- Sleep app interface
- Skincare packaging
- Lavender farm website
- Bridal shower invite
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#5C1A9B | #E8D5F5 | 7.35:1 | AAA |
#7B2FBE | #E8D5F5 | 5.10:1 | AA |
#5C1A9B | #C9A7EB | 4.91:1 | AA |
#7B2FBE | #C9A7EB | 3.41:1 | AA large |
Lavender Fields palette as code
CSS variables
:root {
--lavender-fields-1: #E8D5F5;
--lavender-fields-2: #C9A7EB;
--lavender-fields-3: #A367DC;
--lavender-fields-4: #7B2FBE;
--lavender-fields-5: #5C1A9B;
}Tailwind v4
@theme {
--color-lavender-fields-1: #E8D5F5;
--color-lavender-fields-2: #C9A7EB;
--color-lavender-fields-3: #A367DC;
--color-lavender-fields-4: #7B2FBE;
--color-lavender-fields-5: #5C1A9B;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'lavender-fields': {
100: '#E8D5F5',
200: '#C9A7EB',
300: '#A367DC',
400: '#7B2FBE',
500: '#5C1A9B',
},SCSS
$lavender-fields-1: #E8D5F5;
$lavender-fields-2: #C9A7EB;
$lavender-fields-3: #A367DC;
$lavender-fields-4: #7B2FBE;
$lavender-fields-5: #5C1A9B;JSON
["#E8D5F5","#C9A7EB","#A367DC","#7B2FBE","#5C1A9B"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.