Lavender Fields color palette

Color codes

	HEX	RGB	HSL	CMYK
			hsl(261, 70%, 96%)	cmyk(4%, 6%, 0%, 1%)
			hsl(261, 69%, 90%)	cmyk(9%, 14%, 0%, 3%)
			hsl(263, 44%, 79%)	cmyk(13%, 21%, 0%, 12%)
			hsl(256, 34%, 67%)	cmyk(21%, 29%, 0%, 22%)
			hsl(256, 21%, 46%)	cmyk(26%, 35%, 0%, 44%)

CSS

:root {
  --lavender-fields-1: #F3EEFC;
  --lavender-fields-2: #E0D4F7;
  --lavender-fields-3: #C3B1E1;
  --lavender-fields-4: #9D8EC7;
  --lavender-fields-5: #6A5D8F;
}

How these colors work together

This is a monochromatic palette built around a single hue. Overall it reads cool. Lightness spans 50 points, which sets how much contrast you can create.

1 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is ⁦#F3EEFC⁩ on ⁦#6A5D8F⁩ (5.16:1).

Lavender Fields — readable text using the best pair.

Suggested applications

Baby products, stationery and friendly apps.
Interface themes: use the lightest color for backgrounds and the darkest for text.
Brand kits, social graphics and presentations.

#lavender #purple #soft

Check accessibility Simulate color blindness CSS variables

Frequently asked questions

How do I use the Lavender Fields palette?

The Lavender Fields palette has 5 colors. Use one dominant color for large areas, a supporting color for secondary elements and the most saturated color sparingly as an accent.

Which colors in this palette are best for text?

Use ⁦#F3EEFC⁩ on ⁦#6A5D8F⁩: it has a contrast ratio of 5.16:1.

Can I download this palette?

Yes. Export it as PNG, SVG, CSS variables, JSON or plain text with the buttons above the color table.

Lavender Fields

Color codes

CSS

How these colors work together

Suggested applications

Frequently asked questions

More palettes