← Back to Editor

#DDE4CC · #C8D2AC · #A2C4A6 · #56A89A · #1B8684

A 5-color palette 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

#DDE4CC

Willow Green · LightGray · Mint Green

HEX
#DDE4CC
RGB
rgb(221, 228, 204)
HSL
hsl(78, 31%, 85%)
HSB
hsb(78, 11%, 89%)
CMYK
cmyk(3%, 0%, 11%, 11%)
Oklch
oklch(90.7% 0.033 120.3)

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

#C8D2AC

Willow Green · Silver · Apple Green

HEX
#C8D2AC
RGB
rgb(200, 210, 172)
HSL
hsl(76, 30%, 75%)
HSB
hsb(76, 18%, 82%)
CMYK
cmyk(5%, 0%, 18%, 18%)
Oklch
oklch(84.6% 0.052 119.5)

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

#A2C4A6

Celadon · DarkGray · Apple Green

HEX
#A2C4A6
RGB
rgb(162, 196, 166)
HSL
hsl(127, 22%, 70%)
HSB
hsb(127, 17%, 77%)
CMYK
cmyk(17%, 0%, 15%, 23%)
Oklch
oklch(78.7% 0.056 148.3)

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

#56A89A

Mineral Blue · CadetBlue · Mint Ice

HEX
#56A89A
RGB
rgb(86, 168, 154)
HSL
hsl(170, 32%, 50%)
HSB
hsb(170, 49%, 66%)
CMYK
cmyk(49%, 0%, 8%, 34%)
Oklch
oklch(67.6% 0.083 181.2)

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

#1B8684

Mineral Blue · Teal · Mint Ice

HEX
#1B8684
RGB
rgb(27, 134, 132)
HSL
hsl(179, 66%, 32%)
HSB
hsb(179, 80%, 53%)
CMYK
cmyk(80%, 0%, 1%, 47%)
Oklch
oklch(56.4% 0.090 192.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDE4CC
D4CDE5

Analogous

E5E0CD
DDE4CC
D2E5CD

Triadic

DDE4CC
CDDDE5
E5CDDD

Split-Comp.

DDE4CC
CDD2E5
E0CDE5

Tetradic

DDE4CC
CDE5E0
D4CDE5
E5CDD2

Contrast Matrix WCAG 2.1 Contrast

DDE4CC
C8D2AC
A2C4A6
56A89A
1B8684
—
1.2
Fail
1.5
Fail
2.1
Fail
3.3
AA Large
1.2
Fail
—
1.2
Fail
1.8
Fail
2.8
Fail
1.5
Fail
1.2
Fail
—
1.5
Fail
2.3
Fail
2.1
Fail
1.8
Fail
1.5
Fail
—
1.6
Fail
3.3
AA Large
2.8
Fail
2.3
Fail
1.6
Fail
—
White BG
1.3Fail
1.6Fail
1.9Fail
2.8Fail
4.4AA Large
Black BG
16.0AAA
13.3AAA
11.0AAA
7.5AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0D2
CCCCB5
B1B1AD
7A7A9D
494A84

Deuteranopia

E0DFD3
CCCBB7
AFACAF
756F9E
433B85

Tritanopia

DDD6D7
C9BCBE
A4B3B4
5AA0A1
208585

Achromatopsia

DFDFDF
CBCBCB
B6B6B6
8E8E8E
666666

Shades & Tints Shades & Tints

#DDE4CC

Dark
Light

#C8D2AC

Dark
Light

#A2C4A6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dde4cc;
  --color-2: #c8d2ac;
  --color-3: #a2c4a6;
  --color-4: #56a89a;
  --color-5: #1b8684;
}

SCSS

$color-1: #dde4cc;
$color-2: #c8d2ac;
$color-3: #a2c4a6;
$color-4: #56a89a;
$color-5: #1b8684;

TAILWIND

colors: {
  'brand-1': '#dde4cc',
  'brand-2': '#c8d2ac',
  'brand-3': '#a2c4a6',
  'brand-4': '#56a89a',
  'brand-5': '#1b8684',
}

RGB Array

[221, 228, 204], [200, 210, 172], [162, 196, 166], [86, 168, 154], [27, 134, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDE4CC, #C8D2AC, #A2C4A6, #56A89A, #1B8684 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: #dde4cc; --color-2: #c8d2ac; --color-3: #a2c4a6; --color-4: #56a89a; --color-5: #1b8684. 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 general-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