#FFEBCC + #E9E7D3 + #D3E2DB + #BDDEE2 + #A8D9E9 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFEBCC

Goose Yellow · Bisque · Peach Orange

HEX

#FFEBCC

RGB

rgb(255, 235, 204)

HSL

hsl(36, 100%, 90%)

HSB

hsb(36, 20%, 100%)

CMYK

cmyk(0%, 8%, 20%, 0%)

Oklch

oklch(94.8% 0.046 78.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#E9E7D3

Fresh Green · Beige · Lemon Cream

HEX

#E9E7D3

RGB

rgb(233, 231, 211)

HSL

hsl(55, 33%, 87%)

HSB

hsb(55, 9%, 91%)

CMYK

cmyk(0%, 1%, 9%, 9%)

Oklch

oklch(92.4% 0.027 102.2)

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

#D3E2DB

Jade · LightGray · Mint Green

HEX

#D3E2DB

RGB

rgb(211, 226, 219)

HSL

hsl(152, 21%, 86%)

HSB

hsb(152, 7%, 89%)

CMYK

cmyk(7%, 0%, 3%, 11%)

Oklch

oklch(90.0% 0.019 166.3)

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

#BDDEE2

Sky Blue · LightBlue · Glacier Blue

HEX

#BDDEE2

RGB

rgb(189, 222, 226)

HSL

hsl(186, 39%, 81%)

HSB

hsb(186, 16%, 89%)

CMYK

cmyk(16%, 2%, 0%, 11%)

Oklch

oklch(87.8% 0.035 205.5)

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

#A8D9E9

Sky Blue · LightBlue · Glacier Blue

HEX

#A8D9E9

RGB

rgb(168, 217, 233)

HSL

hsl(195, 60%, 79%)

HSB

hsb(195, 28%, 91%)

CMYK

cmyk(28%, 7%, 0%, 9%)

Oklch

oklch(85.6% 0.055 219.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFEBCC

CCE0FF

Analogous

FFD1CC

FFEBCC

FAFFCC

Triadic

FFEBCC

CCFFEB

EBCCFF

Split-Comp.

FFEBCC

CCFAFF

D1CCFF

Tetradic

FFEBCC

CCFFD1

CCE0FF

FFCCFA

Contrast Matrix WCAG 2.1 Contrast

FFEBCC	E9E7D3	D3E2DB	BDDEE2	A8D9E9
—	1.1 Fail	1.1 Fail	1.2 Fail	1.3 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.3 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.2Fail

1.3Fail

1.4Fail

1.5Fail

Black BG

18.0AAA

16.8AAA

15.7AAA

14.7AAA

13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6D4

E8E8D8

D9DADD

CBCCE1

BDBEE5

Deuteranopia

F8F9D5

E8E8D9

D9D8DD

C9C7E1

BAB7E4

Tritanopia

FED9DB

E9DCDD

D4DEDE

BFE0E0

AAE2E1

Achromatopsia

EDEDED

E5E5E5

DDDDDD

D5D5D5

CCCCCC

Shades & Tints Shades & Tints

#FFEBCC

Dark

Light

#E9E7D3

Dark

Light

#D3E2DB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffebcc;
  --color-2: #e9e7d3;
  --color-3: #d3e2db;
  --color-4: #bddee2;
  --color-5: #a8d9e9;
}

SCSS

$color-1: #ffebcc;
$color-2: #e9e7d3;
$color-3: #d3e2db;
$color-4: #bddee2;
$color-5: #a8d9e9;

TAILWIND

colors: {
  'brand-1': '#ffebcc',
  'brand-2': '#e9e7d3',
  'brand-3': '#d3e2db',
  'brand-4': '#bddee2',
  'brand-5': '#a8d9e9',
}

RGB Array

[255, 235, 204], [233, 231, 211], [211, 226, 219], [189, 222, 226], [168, 217, 233]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FFEBCC, #E9E7D3, #D3E2DB, #BDDEE2, #A8D9E9 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: #ffebcc; --color-2: #e9e7d3; --color-3: #d3e2db; --color-4: #bddee2; --color-5: #a8d9e9. 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 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