#E2EDCE + #F3DDAE + #C1CCB1 + #A1B8AC + #7A7D82 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E2EDCE

Willow Green · Beige · Mint Green

HEX

#E2EDCE

RGB

rgb(226, 237, 206)

HSL

hsl(81, 46%, 87%)

HSB

hsb(81, 13%, 93%)

CMYK

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

Oklch

oklch(93.0% 0.043 123.1)

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

#F3DDAE

Goose Yellow · Wheat · Lemon Cream

HEX

#F3DDAE

RGB

rgb(243, 221, 174)

HSL

hsl(41, 74%, 82%)

HSB

hsb(41, 28%, 95%)

CMYK

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

Oklch

oklch(90.4% 0.066 85.8)

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

#C1CCB1

Willow Green · Silver · Apple Green

HEX

#C1CCB1

RGB

rgb(193, 204, 177)

HSL

hsl(84, 21%, 75%)

HSB

hsb(84, 13%, 80%)

CMYK

cmyk(5%, 0%, 13%, 20%)

Oklch

oklch(82.9% 0.039 125.3)

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

#A1B8AC

Celadon · DarkGray · Apple Green

HEX

#A1B8AC

RGB

rgb(161, 184, 172)

HSL

hsl(149, 14%, 68%)

HSB

hsb(149, 13%, 72%)

CMYK

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

Oklch

oklch(76.2% 0.030 163.0)

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

#7A7D82

Ink Gray · Gray · Warm Gray

HEX

#7A7D82

RGB

rgb(122, 125, 130)

HSL

hsl(218, 3%, 49%)

HSB

hsb(218, 6%, 51%)

CMYK

cmyk(6%, 4%, 0%, 49%)

Oklch

oklch(58.9% 0.008 260.7)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2EDCE

D9CFED

Analogous

EDE9CF

E2EDCE

D3EDCF

Triadic

E2EDCE

CFE2ED

EDCFE2

Split-Comp.

E2EDCE

CFD3ED

E9CFED

Tetradic

E2EDCE

CFEDE9

D9CFED

EDCFD3

Contrast Matrix WCAG 2.1 Contrast

E2EDCE	F3DDAE	C1CCB1	A1B8AC	7A7D82
—	1.1 Fail	1.4 Fail	1.7 Fail	3.4 AA Large
1.1 Fail	—	1.3 Fail	1.6 Fail	3.1 AA Large
1.4 Fail	1.3 Fail	—	1.3 Fail	2.5 Fail
1.7 Fail	1.6 Fail	1.3 Fail	—	2.0 Fail
3.4 AA Large	3.1 AA Large	2.5 Fail	2.0 Fail	—

White BG

1.2Fail

1.3Fail

1.7Fail

2.1Fail

4.1AA Large

Black BG

17.2AAA

15.8AAA

12.5AAA

10.0AAA

5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7D6

E9E9B9

C6C6B8

ABABAF

7B7B81

Deuteranopia

E6E5D7

EBECBC

C5C4B9

AAA8B0

7B7B81

Tritanopia

E3DBDD

F2C2C4

C2BDBE

A2B1B2

7A8080

Achromatopsia

E6E6E6

DEDEDE

C6C6C6

B0B0B0

7D7D7D

Shades & Tints Shades & Tints

#E2EDCE

Dark

Light

#F3DDAE

Dark

Light

#C1CCB1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2edce;
  --color-2: #f3ddae;
  --color-3: #c1ccb1;
  --color-4: #a1b8ac;
  --color-5: #7a7d82;
}

SCSS

$color-1: #e2edce;
$color-2: #f3ddae;
$color-3: #c1ccb1;
$color-4: #a1b8ac;
$color-5: #7a7d82;

TAILWIND

colors: {
  'brand-1': '#e2edce',
  'brand-2': '#f3ddae',
  'brand-3': '#c1ccb1',
  'brand-4': '#a1b8ac',
  'brand-5': '#7a7d82',
}

RGB Array

[226, 237, 206], [243, 221, 174], [193, 204, 177], [161, 184, 172], [122, 125, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E2EDCE, #F3DDAE, #C1CCB1, #A1B8AC, #7A7D82 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: #e2edce; --color-2: #f3ddae; --color-3: #c1ccb1; --color-4: #a1b8ac; --color-5: #7a7d82. 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