#E9F7C7 + #EDE4A1 + #DFAB7E + #CD655F + #B7456D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E9F7C7

Willow Green · Beige · Mint Green

HEX

#E9F7C7

RGB

rgb(233, 247, 199)

HSL

hsl(78, 75%, 87%)

HSB

hsb(78, 19%, 97%)

CMYK

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

Oklch

oklch(95.4% 0.064 120.8)

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

#EDE4A1

Fresh Green · Wheat · Lemon Cream

HEX

#EDE4A1

RGB

rgb(237, 228, 161)

HSL

hsl(53, 68%, 78%)

HSB

hsb(53, 32%, 93%)

CMYK

cmyk(0%, 4%, 32%, 7%)

Oklch

oklch(91.0% 0.086 101.4)

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

#DFAB7E

Apricot · BurlyWood · Warm Sun

HEX

#DFAB7E

RGB

rgb(223, 171, 126)

HSL

hsl(28, 60%, 68%)

HSB

hsb(28, 43%, 87%)

CMYK

cmyk(0%, 23%, 43%, 13%)

Oklch

oklch(77.9% 0.085 61.9)

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

#CD655F

Crimson · LightCoral · Passion Red

HEX

#CD655F

RGB

rgb(205, 101, 95)

HSL

hsl(3, 52%, 59%)

HSB

hsb(3, 54%, 80%)

CMYK

cmyk(0%, 51%, 54%, 20%)

Oklch

oklch(62.9% 0.133 25.0)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#B7456D

Dark Violet · MediumVioletRed · Camellia

HEX

#B7456D

RGB

rgb(183, 69, 109)

HSL

hsl(339, 45%, 49%)

HSB

hsb(339, 62%, 72%)

CMYK

cmyk(0%, 62%, 40%, 28%)

Oklch

oklch(55.6% 0.152 1.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E9F7C7

D4C5F7

Analogous

F7EDC5

E9F7C7

CFF7C5

Triadic

E9F7C7

C5E8F7

F7C5E8

Split-Comp.

E9F7C7

C5CFF7

EDC5F7

Tetradic

E9F7C7

C5F7ED

D4C5F7

F7C5CF

Contrast Matrix WCAG 2.1 Contrast

E9F7C7	EDE4A1	DFAB7E	CD655F	B7456D
—	1.1 Fail	1.8 Fail	3.3 AA Large	4.6 AA
1.1 Fail	—	1.6 Fail	2.9 Fail	4.0 AA Large
1.8 Fail	1.6 Fail	—	1.8 Fail	2.5 Fail
3.3 AA Large	2.9 Fail	1.8 Fail	—	1.4 Fail
4.6 AA	4.0 AA Large	2.5 Fail	1.4 Fail	—

White BG

1.1Fail

1.3Fail

2.0Fail

3.7AA Large

5.1AA

Black BG

18.6AAA

16.2AAA

10.3AAA

5.6AA

4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFD3

E9E9B1

C8C889

A09F60

868563

Deuteranopia

EEEDD5

EAEAB5

CCCF8C

A6AE61

8C9561

Tritanopia

EADCDE

EDBEC1

DC9193

C86262

B15C5A

Achromatopsia

EDEDED

DFDFDF

B5B5B5

838383

6C6C6C

Shades & Tints Shades & Tints

#E9F7C7

Dark

Light

#EDE4A1

Dark

Light

#DFAB7E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e9f7c7;
  --color-2: #ede4a1;
  --color-3: #dfab7e;
  --color-4: #cd655f;
  --color-5: #b7456d;
}

SCSS

$color-1: #e9f7c7;
$color-2: #ede4a1;
$color-3: #dfab7e;
$color-4: #cd655f;
$color-5: #b7456d;

TAILWIND

colors: {
  'brand-1': '#e9f7c7',
  'brand-2': '#ede4a1',
  'brand-3': '#dfab7e',
  'brand-4': '#cd655f',
  'brand-5': '#b7456d',
}

RGB Array

[233, 247, 199], [237, 228, 161], [223, 171, 126], [205, 101, 95], [183, 69, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E9F7C7, #EDE4A1, #DFAB7E, #CD655F, #B7456D 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: #e9f7c7; --color-2: #ede4a1; --color-3: #dfab7e; --color-4: #cd655f; --color-5: #b7456d. 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