coolmonochromevibrant
Lavender Fields Color Palette
Lavender Fields is a cool, monochrome and vibrant color palette of 5 colors: Oxford Blue (#10002b), Indigo (#3c096c), Grape (#7b2cbf), Heliotrope (#c77dff) and Mauve (#e0aaff). Its dominant hue is purple.
The darkest color, Oxford Blue, on the lightest, Mauve, gives a 10.75:1 contrast ratio — enough for body text at WCAG AAA. 4 pairs in this palette pass AA for normal text. Grape (#7b2cbf) is its most saturated color and a natural choice for buttons and links.
Colors
- Oxford Blue
- Indigo
- Grape
- Heliotrope
- Mauve
CSS Output
:root {
--lavender-fields-1: #10002b;
--lavender-fields-2: #3c096c;
--lavender-fields-3: #7b2cbf;
--lavender-fields-4: #c77dff;
--lavender-fields-5: #e0aaff;
}Lavender Fields on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Oxford Blue on Mauve#10002b on #e0aaff10.75:1AAA
- Indigo on Mauve#3c096c on #e0aaff7.84:1AAA
- Oxford Blue on Heliotrope#10002b on #c77dff7.38:1AAA
- Indigo on Heliotrope#3c096c on #c77dff5.39:1AA
- Grape on Mauve#7b2cbf on #e0aaff3.84:1AA Large