#DDE4B5 + #CACFA0 + #BAA87F + #F0AFA1 + #CFE50F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DDE4B5

Fresh Green · Wheat · Lemon Cream

HEX

#DDE4B5

RGB

rgb(221, 228, 181)

HSL

hsl(69, 47%, 80%)

HSB

hsb(69, 21%, 89%)

CMYK

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

Oklch

oklch(90.2% 0.062 114.5)

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

#CACFA0

Fresh Green · Tan · Sunflower

HEX

#CACFA0

RGB

rgb(202, 207, 160)

HSL

hsl(66, 33%, 72%)

HSB

hsb(66, 23%, 81%)

CMYK

cmyk(2%, 0%, 23%, 19%)

Oklch

oklch(83.9% 0.063 112.7)

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

#BAA87F

Ginger · Tan · Sunflower

HEX

#BAA87F

RGB

rgb(186, 168, 127)

HSL

hsl(42, 30%, 61%)

HSB

hsb(42, 32%, 73%)

CMYK

cmyk(0%, 10%, 32%, 27%)

Oklch

oklch(73.7% 0.059 87.0)

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

#F0AFA1

Peach Pink · BurlyWood · Coral Red

HEX

#F0AFA1

RGB

rgb(240, 175, 161)

HSL

hsl(11, 72%, 79%)

HSB

hsb(11, 33%, 94%)

CMYK

cmyk(0%, 27%, 33%, 6%)

Oklch

oklch(81.1% 0.079 32.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CFE50F

Autumn Sage · Gold · Honey Gold

HEX

#CFE50F

RGB

rgb(207, 229, 15)

HSL

hsl(66, 88%, 48%)

HSB

hsb(66, 93%, 90%)

CMYK

cmyk(10%, 0%, 93%, 10%)

Oklch

oklch(87.5% 0.199 116.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDE4B5

BBB4E4

Analogous

E4D3B4

DDE4B5

C5E4B4

Triadic

DDE4B5

B4DDE4

E4B4DD

Split-Comp.

DDE4B5

B4C5E4

D3B4E4

Tetradic

DDE4B5

B4E4D3

BBB4E4

E4B4C5

Contrast Matrix WCAG 2.1 Contrast

DDE4B5	CACFA0	BAA87F	F0AFA1	CFE50F
—	1.2 Fail	1.8 Fail	1.4 Fail	1.1 Fail
1.2 Fail	—	1.4 Fail	1.1 Fail	1.1 Fail
1.8 Fail	1.4 Fail	—	1.3 Fail	1.7 Fail
1.4 Fail	1.1 Fail	1.3 Fail	—	1.3 Fail
1.1 Fail	1.1 Fail	1.7 Fail	1.3 Fail	—

White BG

1.3Fail

1.6Fail

2.3Fail

1.8Fail

1.4Fail

Black BG

15.8AAA

12.9AAA

9.0AAA

11.4AAA

14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0C0

CCCCAB

B2B289

D4D3A4

D9D943

Deuteranopia

E0DFC3

CCCBAE

B3B58B

D8DDA5

D7D64F

Tritanopia

DDC9CB

CAB4B6

B99192

EDA7A8

D06C75

Achromatopsia

DDDDDD

C8C8C8

A9A9A9

C1C1C1

C6C6C6

Shades & Tints Shades & Tints

#DDE4B5

Dark

Light

#CACFA0

Dark

Light

#BAA87F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dde4b5;
  --color-2: #cacfa0;
  --color-3: #baa87f;
  --color-4: #f0afa1;
  --color-5: #cfe50f;
}

SCSS

$color-1: #dde4b5;
$color-2: #cacfa0;
$color-3: #baa87f;
$color-4: #f0afa1;
$color-5: #cfe50f;

TAILWIND

colors: {
  'brand-1': '#dde4b5',
  'brand-2': '#cacfa0',
  'brand-3': '#baa87f',
  'brand-4': '#f0afa1',
  'brand-5': '#cfe50f',
}

RGB Array

[221, 228, 181], [202, 207, 160], [186, 168, 127], [240, 175, 161], [207, 229, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDE4B5, #CACFA0, #BAA87F, #F0AFA1, #CFE50F 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: #dde4b5; --color-2: #cacfa0; --color-3: #baa87f; --color-4: #f0afa1; --color-5: #cfe50f. 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