← Back to Editor

#D3EBB2 · #A2DFA8 · #61CF9B · #649285 · #67546E

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

#D3EBB2

Willow Green · Wheat · Mint Green

HEX
#D3EBB2
RGB
rgb(211, 235, 178)
HSL
hsl(85, 59%, 81%)
HSB
hsb(85, 24%, 92%)
CMYK
cmyk(10%, 0%, 24%, 8%)
Oklch
oklch(90.8% 0.079 126.5)

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

#A2DFA8

Celadon · LightGreen · Apple Green

HEX
#A2DFA8
RGB
rgb(162, 223, 168)
HSL
hsl(126, 49%, 75%)
HSB
hsb(126, 27%, 87%)
CMYK
cmyk(27%, 0%, 25%, 13%)
Oklch
oklch(84.8% 0.098 147.2)

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

#61CF9B

Mineral Blue · MediumAquaMarine · Olive Green

HEX
#61CF9B
RGB
rgb(97, 207, 155)
HSL
hsl(152, 53%, 60%)
HSB
hsb(152, 53%, 81%)
CMYK
cmyk(53%, 0%, 25%, 19%)
Oklch
oklch(77.6% 0.127 160.7)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#649285

Mineral Blue · SlateGray · Mint Ice

HEX
#649285
RGB
rgb(100, 146, 133)
HSL
hsl(163, 19%, 48%)
HSB
hsb(163, 32%, 57%)
CMYK
cmyk(32%, 0%, 9%, 43%)
Oklch
oklch(62.3% 0.054 174.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#67546E

Dark Plum · DimGray · Eggplant

HEX
#67546E
RGB
rgb(103, 84, 110)
HSL
hsl(284, 13%, 38%)
HSB
hsb(284, 24%, 43%)
CMYK
cmyk(6%, 24%, 0%, 57%)
Oklch
oklch(47.5% 0.047 316.9)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3EBB2
CAB2EB

Analogous

EBE6B2
D3EBB2
B7EBB2

Triadic

D3EBB2
B2D3EB
EBB2D3

Split-Comp.

D3EBB2
B2B7EB
E6B2EB

Tetradic

D3EBB2
B2EBE6
CAB2EB
EBB2B7

Contrast Matrix WCAG 2.1 Contrast

D3EBB2
A2DFA8
61CF9B
649285
67546E
—
1.2
Fail
1.5
Fail
2.7
Fail
5.3
AA
1.2
Fail
—
1.3
Fail
2.3
Fail
4.4
AA Large
1.5
Fail
1.3
Fail
—
1.8
Fail
3.6
AA Large
2.7
Fail
2.3
Fail
1.8
Fail
—
2.0
Fail
5.3
AA
4.4
AA Large
3.6
AA Large
2.0
Fail
—
White BG
1.3Fail
1.5Fail
1.9Fail
3.5AA Large
6.8AA
Black BG
16.3AAA
13.7AAA
10.9AAA
6.0AA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDEC0
BCBDB5
9192A8
787888
5F5F68

Deuteranopia

DCDAC3
B9B4B9
8A82AB
757289
606166

Tritanopia

D4CBCD
A5C0C2
67B2B4
668B8B
666362

Achromatopsia

DDDDDD
C6C6C6
A8A8A8
838383
5D5D5D

Shades & Tints Shades & Tints

#D3EBB2

Dark
Light

#A2DFA8

Dark
Light

#61CF9B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3ebb2;
  --color-2: #a2dfa8;
  --color-3: #61cf9b;
  --color-4: #649285;
  --color-5: #67546e;
}

SCSS

$color-1: #d3ebb2;
$color-2: #a2dfa8;
$color-3: #61cf9b;
$color-4: #649285;
$color-5: #67546e;

TAILWIND

colors: {
  'brand-1': '#d3ebb2',
  'brand-2': '#a2dfa8',
  'brand-3': '#61cf9b',
  'brand-4': '#649285',
  'brand-5': '#67546e',
}

RGB Array

[211, 235, 178], [162, 223, 168], [97, 207, 155], [100, 146, 133], [103, 84, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #D3EBB2, #A2DFA8, #61CF9B, #649285, #67546E is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d3ebb2; --color-2: #a2dfa8; --color-3: #61cf9b; --color-4: #649285; --color-5: #67546e. 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. 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