← Back to Editor

#DDE7DC · #BAC9C2 · #ABB0AC · #F2F4E7 · #F0E0D3

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DDE7DC

Celadon · LightGray · Mint Green

HEX
#DDE7DC
RGB
rgb(221, 231, 220)
HSL
hsl(115, 19%, 88%)
HSB
hsb(115, 5%, 91%)
CMYK
cmyk(4%, 0%, 5%, 9%)
Oklch
oklch(91.7% 0.018 142.8)

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

#BAC9C2

Jade · Silver · Apple Green

HEX
#BAC9C2
RGB
rgb(186, 201, 194)
HSL
hsl(152, 12%, 76%)
HSB
hsb(152, 7%, 79%)
CMYK
cmyk(7%, 0%, 3%, 21%)
Oklch
oklch(82.2% 0.019 166.3)

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

#ABB0AC

Ash · DarkGray · Silver Sand

HEX
#ABB0AC
RGB
rgb(171, 176, 172)
HSL
hsl(132, 3%, 68%)
HSB
hsb(132, 3%, 69%)
CMYK
cmyk(3%, 0%, 2%, 31%)
Oklch
oklch(75.2% 0.008 151.8)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#F2F4E7

Fresh Green · Linen · Lemon Cream

HEX
#F2F4E7
RGB
rgb(242, 244, 231)
HSL
hsl(69, 37%, 93%)
HSB
hsb(69, 5%, 96%)
CMYK
cmyk(1%, 0%, 5%, 4%)
Oklch
oklch(96.2% 0.017 113.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F0E0D3

Apricot · Bisque · Peach Orange

HEX
#F0E0D3
RGB
rgb(240, 224, 211)
HSL
hsl(27, 49%, 88%)
HSB
hsb(27, 12%, 94%)
CMYK
cmyk(0%, 7%, 12%, 6%)
Oklch
oklch(91.6% 0.025 61.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDE7DC
E5DBE6

Analogous

E1E6DB
DDE7DC
DBE6DF

Triadic

DDE7DC
DBDCE6
E6DBDC

Split-Comp.

DDE7DC
DFDBE6
E6DBE1

Tetradic

DDE7DC
DBE1E6
E5DBE6
E6DFDB

Contrast Matrix WCAG 2.1 Contrast

DDE7DC
BAC9C2
ABB0AC
F2F4E7
F0E0D3
—
1.4
Fail
1.7
Fail
1.1
Fail
1.0
Fail
1.4
Fail
—
1.3
Fail
1.5
Fail
1.3
Fail
1.7
Fail
1.3
Fail
—
2.0
Fail
1.7
Fail
1.1
Fail
1.5
Fail
2.0
Fail
—
1.2
Fail
1.0
Fail
1.3
Fail
1.7
Fail
1.2
Fail
—
White BG
1.3Fail
1.7Fail
2.2Fail
1.1Fail
1.3Fail
Black BG
16.5AAA
12.2AAA
9.5AAA
18.9AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E1DF
C0C1C4
ADADAD
F3F3EA
E9E9D6

Deuteranopia

E1E0DF
C0BFC4
ADADAD
F3F3EB
EAEBD7

Tritanopia

DEE1E1
BBC5C5
ABAEAE
F2EDED
EFD9D9

Achromatopsia

E3E3E3
C4C4C4
AEAEAE
F2F2F2
E3E3E3

Shades & Tints Shades & Tints

#DDE7DC

Dark
Light

#BAC9C2

Dark
Light

#ABB0AC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dde7dc;
  --color-2: #bac9c2;
  --color-3: #abb0ac;
  --color-4: #f2f4e7;
  --color-5: #f0e0d3;
}

SCSS

$color-1: #dde7dc;
$color-2: #bac9c2;
$color-3: #abb0ac;
$color-4: #f2f4e7;
$color-5: #f0e0d3;

TAILWIND

colors: {
  'brand-1': '#dde7dc',
  'brand-2': '#bac9c2',
  'brand-3': '#abb0ac',
  'brand-4': '#f2f4e7',
  'brand-5': '#f0e0d3',
}

RGB Array

[221, 231, 220], [186, 201, 194], [171, 176, 172], [242, 244, 231], [240, 224, 211]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #DDE7DC, #BAC9C2, #ABB0AC, #F2F4E7, #F0E0D3 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. 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: #dde7dc; --color-2: #bac9c2; --color-3: #abb0ac; --color-4: #f2f4e7; --color-5: #f0e0d3. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 cool-style 5-color scheme is especially suited for beauty, lifestyle, arts 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