#DFDFAE + #CE6D55 + #D8A878 + #DECB9B + #F0F0D8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DFDFAE

Fresh Green · Wheat · Lemon Cream

HEX

#DFDFAE

RGB

rgb(223, 223, 174)

HSL

hsl(60, 43%, 78%)

HSB

hsb(60, 22%, 87%)

CMYK

cmyk(0%, 0%, 22%, 13%)

Oklch

oklch(89.1% 0.064 107.6)

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

#CE6D55

Crimson · Tomato · Passion Red

HEX

#CE6D55

RGB

rgb(206, 109, 85)

HSL

hsl(12, 55%, 57%)

HSB

hsb(12, 59%, 81%)

CMYK

cmyk(0%, 47%, 59%, 19%)

Oklch

oklch(64.1% 0.128 34.9)

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

#D8A878

Ginger · BurlyWood · Warm Sun

HEX

#D8A878

RGB

rgb(216, 168, 120)

HSL

hsl(30, 55%, 66%)

HSB

hsb(30, 44%, 85%)

CMYK

cmyk(0%, 22%, 44%, 15%)

Oklch

oklch(76.5% 0.085 66.0)

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

#DECB9B

Goose Yellow · BurlyWood · Sunflower

HEX

#DECB9B

RGB

rgb(222, 203, 155)

HSL

hsl(43, 50%, 74%)

HSB

hsb(43, 30%, 87%)

CMYK

cmyk(0%, 9%, 30%, 13%)

Oklch

oklch(84.6% 0.067 89.0)

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

#F0F0D8

Fresh Green · Beige · Lemon Cream

HEX

#F0F0D8

RGB

rgb(240, 240, 216)

HSL

hsl(60, 44%, 89%)

HSB

hsb(60, 10%, 94%)

CMYK

cmyk(0%, 0%, 10%, 6%)

Oklch

oklch(94.9% 0.032 107.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFDFAE

AFAFDF

Analogous

DFC7AF

DFDFAE

C7DFAF

Triadic

DFDFAE

AFDFDF

DFAFDF

Split-Comp.

DFDFAE

AFC7DF

C7AFDF

Tetradic

DFDFAE

AFDFC7

AFAFDF

DFAFC7

Contrast Matrix WCAG 2.1 Contrast

DFDFAE	CE6D55	D8A878	DECB9B	F0F0D8
—	2.6 Fail	1.6 Fail	1.2 Fail	1.2 Fail
2.6 Fail	—	1.6 Fail	2.2 Fail	3.1 AA Large
1.6 Fail	1.6 Fail	—	1.3 Fail	1.9 Fail
1.2 Fail	2.2 Fail	1.3 Fail	—	1.4 Fail
1.2 Fail	3.1 AA Large	1.9 Fail	1.4 Fail	—

White BG

1.4Fail

3.5AA Large

2.1Fail

1.6Fail

1.2Fail

Black BG

15.3AAA

5.9AA

9.8AAA

13.1AAA

18.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFBA

A4A35B

C3C384

D6D6A7

F0F0DE

Deuteranopia

DFDFBD

AAB15C

C6CA86

D7D8A9

F0F0DF

Tritanopia

DFC3C5

C95F60

D68D8F

DDB0B2

F0E2E3

Achromatopsia

D9D9D9

878787

B1B1B1

CBCBCB

EDEDED

Shades & Tints Shades & Tints

#DFDFAE

Dark

Light

#CE6D55

Dark

Light

#D8A878

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfdfae;
  --color-2: #ce6d55;
  --color-3: #d8a878;
  --color-4: #decb9b;
  --color-5: #f0f0d8;
}

SCSS

$color-1: #dfdfae;
$color-2: #ce6d55;
$color-3: #d8a878;
$color-4: #decb9b;
$color-5: #f0f0d8;

TAILWIND

colors: {
  'brand-1': '#dfdfae',
  'brand-2': '#ce6d55',
  'brand-3': '#d8a878',
  'brand-4': '#decb9b',
  'brand-5': '#f0f0d8',
}

RGB Array

[223, 223, 174], [206, 109, 85], [216, 168, 120], [222, 203, 155], [240, 240, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFDFAE, #CE6D55, #D8A878, #DECB9B, #F0F0D8 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: #dfdfae; --color-2: #ce6d55; --color-3: #d8a878; --color-4: #decb9b; --color-5: #f0f0d8. 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