#ECE0B7 + #EDC2C2 + #EFE7E2 + #A1B8B3 + #CCD8C8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECE0B7

Goose Yellow · Wheat · Lemon Cream

HEX

#ECE0B7

RGB

rgb(236, 224, 183)

HSL

hsl(46, 58%, 82%)

HSB

hsb(46, 22%, 93%)

CMYK

cmyk(0%, 5%, 22%, 7%)

Oklch

oklch(90.6% 0.055 93.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#EDC2C2

Peach Pink · Pink · Cherry Blossom

HEX

#EDC2C2

RGB

rgb(237, 194, 194)

HSL

hsl(0, 54%, 85%)

HSB

hsb(0, 18%, 93%)

CMYK

cmyk(0%, 18%, 18%, 7%)

Oklch

oklch(85.2% 0.049 18.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#EFE7E2

Apricot · Linen · Peach Orange

HEX

#EFE7E2

RGB

rgb(239, 231, 226)

HSL

hsl(23, 29%, 91%)

HSB

hsb(23, 5%, 94%)

CMYK

cmyk(0%, 3%, 5%, 6%)

Oklch

oklch(93.3% 0.011 54.5)

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

#A1B8B3

Jade · DarkGray · Lake Green

HEX

#A1B8B3

RGB

rgb(161, 184, 179)

HSL

hsl(167, 14%, 68%)

HSB

hsb(167, 13%, 72%)

CMYK

cmyk(13%, 0%, 3%, 28%)

Oklch

oklch(76.4% 0.026 181.0)

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

#CCD8C8

Celadon · LightGray · Mint Green

HEX

#CCD8C8

RGB

rgb(204, 216, 200)

HSL

hsl(105, 17%, 82%)

HSB

hsb(105, 7%, 85%)

CMYK

cmyk(6%, 0%, 7%, 15%)

Oklch

oklch(86.9% 0.025 137.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECE0B7

B6C3EC

Analogous

ECC5B6

ECE0B7

DEECB6

Triadic

ECE0B7

B6ECDF

DFB6EC

Split-Comp.

ECE0B7

B6DEEC

C5B6EC

Tetradic

ECE0B7

B6ECC5

B6C3EC

ECB6DE

Contrast Matrix WCAG 2.1 Contrast

ECE0B7	EDC2C2	EFE7E2	A1B8B3	CCD8C8
—	1.2 Fail	1.1 Fail	1.6 Fail	1.1 Fail
1.2 Fail	—	1.3 Fail	1.3 Fail	1.1 Fail
1.1 Fail	1.3 Fail	—	1.7 Fail	1.2 Fail
1.6 Fail	1.3 Fail	1.7 Fail	—	1.4 Fail
1.1 Fail	1.1 Fail	1.2 Fail	1.4 Fail	—

White BG

1.3Fail

1.6Fail

1.2Fail

2.1Fail

1.5Fail

Black BG

15.9AAA

13.1AAA

17.2AAA

10.0AAA

14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7C1

DADAC2

ECEBE3

ABABB4

D1D1CC

Deuteranopia

E8E8C3

DDE0C2

ECEDE4

AAA8B5

D1D0CD

Tritanopia

EBC9CA

EBC2C2

EFE4E4

A2B5B5

CDCFD0

Achromatopsia

DFDFDF

CFCFCF

E9E9E9

B1B1B1

D3D3D3

Shades & Tints Shades & Tints

#ECE0B7

Dark

Light

#EDC2C2

Dark

Light

#EFE7E2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ece0b7;
  --color-2: #edc2c2;
  --color-3: #efe7e2;
  --color-4: #a1b8b3;
  --color-5: #ccd8c8;
}

SCSS

$color-1: #ece0b7;
$color-2: #edc2c2;
$color-3: #efe7e2;
$color-4: #a1b8b3;
$color-5: #ccd8c8;

TAILWIND

colors: {
  'brand-1': '#ece0b7',
  'brand-2': '#edc2c2',
  'brand-3': '#efe7e2',
  'brand-4': '#a1b8b3',
  'brand-5': '#ccd8c8',
}

RGB Array

[236, 224, 183], [237, 194, 194], [239, 231, 226], [161, 184, 179], [204, 216, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECE0B7, #EDC2C2, #EFE7E2, #A1B8B3, #CCD8C8 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: #ece0b7; --color-2: #edc2c2; --color-3: #efe7e2; --color-4: #a1b8b3; --color-5: #ccd8c8. 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