Color Palette
#E8ECF0 · #C5D0DC · #7A9BB5 · #3D6080 · #1A3040
Export for Developers
:root {
--color-1: #E8ECF0;
--color-1-rgb: 232, 236, 240;
--color-1-hsl: 210, 21%, 93%;
--color-2: #C5D0DC;
--color-2-rgb: 197, 208, 220;
--color-2-hsl: 211, 25%, 82%;
--color-3: #7A9BB5;
--color-3-rgb: 122, 155, 181;
--color-3-hsl: 206, 29%, 59%;
--color-4: #3D6080;
--color-4-rgb: 61, 96, 128;
--color-4-hsl: 209, 35%, 37%;
--color-5: #1A3040;
--color-5-rgb: 26, 48, 64;
--color-5-hsl: 205, 42%, 18%;
}Real World Preview
Accessibility
WCAG Accessibility Report
ExcellentContrast ratios calculated per WCAG 2.1. AA requires ≥4.5:1, AAA requires ≥7:1 for normal text.
Palette Variations
Palette Variations
Original
lighter
· Increased lightness, reduced saturation
darker
· Reduced lightness, increased saturation
muted
· Desaturated for a calm, muted look
vibrant
· Boosted saturation for maximum impact
Best Use Cases for This Palette
This monochromatic palette featuring Lavender, Light Gray, Light Slate Gray works well across a variety of design contexts. Below are some of the most common use cases — click to see curated palettes for each.
Frequently Asked Questions
What are the hex codes in this color palette?
The colors in this palette are: #E8ECF0, #C5D0DC, #7A9BB5, #3D6080, #1A3040. Copy them individually or export the full palette as CSS variables, Tailwind config, SCSS, or JSON using the Export section above.
What is this color palette good for?
This monochromatic color palette featuring Lavender, Light Gray, Light Slate Gray works well for websites, mobile apps, branding projects, and digital designs. Check the Real World Preview section to see how it looks on buttons, cards, and navigation.
Is this color palette accessible?
Check the Accessibility section below to see WCAG contrast ratios for all color combinations in this palette. Look for combinations that achieve 4.5:1 or higher for text use.
How do I use this palette in Tailwind CSS?
Click "Export for Developers" and select the Tailwind option. You will get a formatted config object ready to paste into your tailwind.config.js file. Each color becomes a utility class in your project.
Explore more: Generate palettes · Check contrast · Tints & shades · All free tools