← Back to Editor

#D4E8E6 · #CBE4E1 · #E5F0E0 · #D7BDA4 · #EBE2AB

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

#D4E8E6

Jade · Lavender · Glacier Blue

HEX
#D4E8E6
RGB
rgb(212, 232, 230)
HSL
hsl(174, 30%, 87%)
HSB
hsb(174, 9%, 91%)
CMYK
cmyk(9%, 0%, 1%, 9%)
Oklch
oklch(91.6% 0.021 189.5)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#CBE4E1

Jade · LightGray · Glacier Blue

HEX
#CBE4E1
RGB
rgb(203, 228, 225)
HSL
hsl(173, 32%, 85%)
HSB
hsb(173, 11%, 89%)
CMYK
cmyk(11%, 0%, 1%, 11%)
Oklch
oklch(90.0% 0.027 188.0)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#E5F0E0

Celadon · Beige · Mint Green

HEX
#E5F0E0
RGB
rgb(229, 240, 224)
HSL
hsl(101, 35%, 91%)
HSB
hsb(101, 7%, 94%)
CMYK
cmyk(5%, 0%, 7%, 6%)
Oklch
oklch(94.3% 0.024 135.7)

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

#D7BDA4

Apricot · Tan · Warm Sun

HEX
#D7BDA4
RGB
rgb(215, 189, 164)
HSL
hsl(29, 39%, 74%)
HSB
hsb(29, 24%, 84%)
CMYK
cmyk(0%, 12%, 24%, 16%)
Oklch
oklch(81.4% 0.045 66.0)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#EBE2AB

Fresh Green · Wheat · Lemon Cream

HEX
#EBE2AB
RGB
rgb(235, 226, 171)
HSL
hsl(52, 62%, 80%)
HSB
hsb(52, 27%, 92%)
CMYK
cmyk(0%, 4%, 27%, 8%)
Oklch
oklch(90.7% 0.072 99.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4E8E6
E8D4D6

Analogous

D4E8DC
D4E8E6
D4E0E8

Triadic

D4E8E6
E6D4E8
E8E6D4

Split-Comp.

D4E8E6
E8D4E0
E8DCD4

Tetradic

D4E8E6
DCD4E8
E8D4D6
E0E8D4

Contrast Matrix WCAG 2.1 Contrast

D4E8E6
CBE4E1
E5F0E0
D7BDA4
EBE2AB
—
1.0
Fail
1.1
Fail
1.4
Fail
1.0
Fail
1.0
Fail
—
1.1
Fail
1.3
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
1.5
Fail
1.1
Fail
1.4
Fail
1.3
Fail
1.5
Fail
—
1.4
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.4
Fail
—
White BG
1.3Fail
1.3Fail
1.2Fail
1.8Fail
1.3Fail
Black BG
16.5AAA
15.7AAA
17.9AAA
11.7AAA
16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDE6
D6D6E2
EAEAE4
CCCCAA
E7E7B8

Deuteranopia

DCDAE7
D4D3E2
E9E8E5
CDCFAC
E8E8BC

Tritanopia

D5E7E7
CCE2E2
E6E7E8
D6AFB0
EBC3C5

Achromatopsia

E2E2E2
DCDCDC
EBEBEB
C2C2C2
DEDEDE

Shades & Tints Shades & Tints

#D4E8E6

Dark
Light

#CBE4E1

Dark
Light

#E5F0E0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4e8e6;
  --color-2: #cbe4e1;
  --color-3: #e5f0e0;
  --color-4: #d7bda4;
  --color-5: #ebe2ab;
}

SCSS

$color-1: #d4e8e6;
$color-2: #cbe4e1;
$color-3: #e5f0e0;
$color-4: #d7bda4;
$color-5: #ebe2ab;

TAILWIND

colors: {
  'brand-1': '#d4e8e6',
  'brand-2': '#cbe4e1',
  'brand-3': '#e5f0e0',
  'brand-4': '#d7bda4',
  'brand-5': '#ebe2ab',
}

RGB Array

[212, 232, 230], [203, 228, 225], [229, 240, 224], [215, 189, 164], [235, 226, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4E8E6, #CBE4E1, #E5F0E0, #D7BDA4, #EBE2AB is ideal for: health products, baby brands, fresh-style blogs. 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: #d4e8e6; --color-2: #cbe4e1; --color-3: #e5f0e0; --color-4: #d7bda4; --color-5: #ebe2ab. 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 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