← Back to Editor

#E2EDD5 · #C7DBA4 · #7EBFB4 · #8A90A6 · #576270

summer

A 5-color summer palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E2EDD5

Willow Green · Beige · Mint Green

HEX
#E2EDD5
RGB
rgb(226, 237, 213)
HSL
hsl(88, 40%, 88%)
HSB
hsb(88, 10%, 93%)
CMYK
cmyk(5%, 0%, 10%, 7%)
Oklch
oklch(93.1% 0.034 127.2)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#C7DBA4

Willow Green · Silver · Apple Green

HEX
#C7DBA4
RGB
rgb(199, 219, 164)
HSL
hsl(82, 43%, 75%)
HSB
hsb(82, 25%, 86%)
CMYK
cmyk(9%, 0%, 25%, 14%)
Oklch
oklch(86.3% 0.076 124.2)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#7EBFB4

Jade · MediumAquaMarine · Lake Green

HEX
#7EBFB4
RGB
rgb(126, 191, 180)
HSL
hsl(170, 34%, 62%)
HSB
hsb(170, 34%, 75%)
CMYK
cmyk(34%, 0%, 6%, 25%)
Oklch
oklch(75.8% 0.068 182.6)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#8A90A6

Azure · LightSlateGray · Navy Blue

HEX
#8A90A6
RGB
rgb(138, 144, 166)
HSL
hsl(227, 14%, 60%)
HSB
hsb(227, 17%, 65%)
CMYK
cmyk(17%, 13%, 0%, 35%)
Oklch
oklch(65.6% 0.033 273.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#576270

Indigo · DimGray · Prussian Blue

HEX
#576270
RGB
rgb(87, 98, 112)
HSL
hsl(214, 13%, 39%)
HSB
hsb(214, 22%, 44%)
CMYK
cmyk(22%, 13%, 0%, 56%)
Oklch
oklch(49.2% 0.026 254.5)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2EDD5
E0D4ED

Analogous

EDECD4
E2EDD5
D5EDD4

Triadic

E2EDD5
D4E1ED
EDD4E1

Split-Comp.

E2EDD5
D4D5ED
ECD4ED

Tetradic

E2EDD5
D4EDEC
E0D4ED
EDD4D5

Contrast Matrix WCAG 2.1 Contrast

E2EDD5
C7DBA4
7EBFB4
8A90A6
576270
—
1.2
Fail
1.7
Fail
2.6
Fail
5.1
AA
1.2
Fail
—
1.4
Fail
2.1
Fail
4.2
AA Large
1.7
Fail
1.4
Fail
—
1.5
Fail
3.0
Fail
2.6
Fail
2.1
Fail
1.5
Fail
—
2.0
Fail
5.1
AA
4.2
AA Large
3.0
Fail
2.0
Fail
—
White BG
1.2Fail
1.5Fail
2.1Fail
3.2AA Large
6.2AA
Black BG
17.3AAA
14.1AAA
10.0AAA
6.6AA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7DB
D0D0B1
9A9BB7
8D8DA1
5C5C6D

Deuteranopia

E6E5DC
CFCDB5
9692B7
8C8C9F
5B5A6C

Tritanopia

E3DFE0
C8BCBE
81B9B9
8A9C9C
586A69

Achromatopsia

E7E7E7
CFCFCF
AAAAAA
919191
606060

Shades & Tints Shades & Tints

#E2EDD5

Dark
Light

#C7DBA4

Dark
Light

#7EBFB4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2edd5;
  --color-2: #c7dba4;
  --color-3: #7ebfb4;
  --color-4: #8a90a6;
  --color-5: #576270;
}

SCSS

$color-1: #e2edd5;
$color-2: #c7dba4;
$color-3: #7ebfb4;
$color-4: #8a90a6;
$color-5: #576270;

TAILWIND

colors: {
  'brand-1': '#e2edd5',
  'brand-2': '#c7dba4',
  'brand-3': '#7ebfb4',
  'brand-4': '#8a90a6',
  'brand-5': '#576270',
}

RGB Array

[226, 237, 213], [199, 219, 164], [126, 191, 180], [138, 144, 166], [87, 98, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #E2EDD5, #C7DBA4, #7EBFB4, #8A90A6, #576270 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e2edd5; --color-2: #c7dba4; --color-3: #7ebfb4; --color-4: #8a90a6; --color-5: #576270. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This summer-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color