#ECF0D4 + #DCE3A4 + #D4BF8B + #C9616B + #E0315C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECF0D4

Fresh Green · Beige · Lemon Cream

HEX

#ECF0D4

RGB

rgb(236, 240, 212)

HSL

hsl(69, 48%, 89%)

HSB

hsb(69, 12%, 94%)

CMYK

cmyk(2%, 0%, 12%, 6%)

Oklch

oklch(94.5% 0.037 113.7)

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

#DCE3A4

Fresh Green · Wheat · Lemon Cream

HEX

#DCE3A4

RGB

rgb(220, 227, 164)

HSL

hsl(67, 53%, 77%)

HSB

hsb(67, 28%, 89%)

CMYK

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

Oklch

oklch(89.5% 0.082 113.2)

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

#D4BF8B

Ginger · Tan · Sunflower

HEX

#D4BF8B

RGB

rgb(212, 191, 139)

HSL

hsl(43, 46%, 69%)

HSB

hsb(43, 34%, 83%)

CMYK

cmyk(0%, 10%, 34%, 17%)

Oklch

oklch(81.0% 0.072 88.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C9616B

Crimson · LightCoral · Passion Red

HEX

#C9616B

RGB

rgb(201, 97, 107)

HSL

hsl(354, 49%, 58%)

HSB

hsb(354, 52%, 79%)

CMYK

cmyk(0%, 52%, 47%, 21%)

Oklch

oklch(62.0% 0.132 15.8)

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

#E0315C

Vermilion · Crimson · Passion Red

HEX

#E0315C

RGB

rgb(224, 49, 92)

HSL

hsl(345, 74%, 54%)

HSB

hsb(345, 78%, 88%)

CMYK

cmyk(0%, 78%, 59%, 12%)

Oklch

oklch(60.0% 0.209 12.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF0D4

DAD5F0

Analogous

F0E7D5

ECF0D4

DFF0D5

Triadic

ECF0D4

D5ECF0

F0D5EC

Split-Comp.

ECF0D4

D5DFF0

E7D5F0

Tetradic

ECF0D4

D5F0E7

DAD5F0

F0D5DF

Contrast Matrix WCAG 2.1 Contrast

ECF0D4	DCE3A4	D4BF8B	C9616B	E0315C
—	1.2 Fail	1.5 Fail	3.3 AA Large	3.8 AA Large
1.2 Fail	—	1.3 Fail	2.9 Fail	3.3 AA Large
1.5 Fail	1.3 Fail	—	2.2 Fail	2.4 Fail
3.3 AA Large	2.9 Fail	2.2 Fail	—	1.1 Fail
3.8 AA Large	3.3 AA Large	2.4 Fail	1.1 Fail	—

White BG

1.2Fail

1.3Fail

1.8Fail

3.9AA Large

4.4AA Large

Black BG

18.0AAA

15.6AAA

11.6AAA

5.4AA

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEEDB

DFDFB3

CBCB98

9C9B69

949352

Deuteranopia

EEEDDC

DFDEB7

CCCE9B

A2AA68

9EAB4F

Tritanopia

ECE0E1

DCBFC2

D3A2A4

C46766

D74948

Achromatopsia

ECECEC

DADADA

BFBFBF

818181

6A6A6A

Shades & Tints Shades & Tints

#ECF0D4

Dark

Light

#DCE3A4

Dark

Light

#D4BF8B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf0d4;
  --color-2: #dce3a4;
  --color-3: #d4bf8b;
  --color-4: #c9616b;
  --color-5: #e0315c;
}

SCSS

$color-1: #ecf0d4;
$color-2: #dce3a4;
$color-3: #d4bf8b;
$color-4: #c9616b;
$color-5: #e0315c;

TAILWIND

colors: {
  'brand-1': '#ecf0d4',
  'brand-2': '#dce3a4',
  'brand-3': '#d4bf8b',
  'brand-4': '#c9616b',
  'brand-5': '#e0315c',
}

RGB Array

[236, 240, 212], [220, 227, 164], [212, 191, 139], [201, 97, 107], [224, 49, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECF0D4, #DCE3A4, #D4BF8B, #C9616B, #E0315C 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: #ecf0d4; --color-2: #dce3a4; --color-3: #d4bf8b; --color-4: #c9616b; --color-5: #e0315c. 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