#D8B868 + #FAF6E8 + #CCBCC1 + #EDCDE7 + #E2E8CE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D8B868

Ginger · BurlyWood · Sunflower

HEX

#D8B868

RGB

rgb(216, 184, 104)

HSL

hsl(43, 59%, 63%)

HSB

hsb(43, 52%, 85%)

CMYK

cmyk(0%, 15%, 52%, 15%)

Oklch

oklch(79.4% 0.106 88.1)

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

#FAF6E8

Goose Yellow · Linen · Lemon Cream

HEX

#FAF6E8

RGB

rgb(250, 246, 232)

HSL

hsl(47, 64%, 95%)

HSB

hsb(47, 7%, 98%)

CMYK

cmyk(0%, 2%, 7%, 2%)

Oklch

oklch(97.2% 0.019 93.7)

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

#CCBCC1

Rouge · Silver · Cherry Blossom

HEX

#CCBCC1

RGB

rgb(204, 188, 193)

HSL

hsl(341, 14%, 77%)

HSB

hsb(341, 8%, 80%)

CMYK

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

Oklch

oklch(81.0% 0.019 356.6)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#EDCDE7

Mauve · Lavender · Lavender

HEX

#EDCDE7

RGB

rgb(237, 205, 231)

HSL

hsl(311, 47%, 87%)

HSB

hsb(311, 14%, 93%)

CMYK

cmyk(0%, 14%, 3%, 7%)

Oklch

oklch(88.3% 0.049 332.3)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#E2E8CE

Willow Green · LightGray · Mint Green

HEX

#E2E8CE

RGB

rgb(226, 232, 206)

HSL

hsl(74, 36%, 86%)

HSB

hsb(74, 11%, 91%)

CMYK

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

Oklch

oklch(91.9% 0.035 117.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8B868

6989D8

Analogous

D88169

D8B868

C0D869

Triadic

D8B868

69D8B9

B969D8

Split-Comp.

D8B868

69C0D8

8169D8

Tetradic

D8B868

69D881

6989D8

D869C0

Contrast Matrix WCAG 2.1 Contrast

D8B868	FAF6E8	CCBCC1	EDCDE7	E2E8CE
—	1.8 Fail	1.1 Fail	1.3 Fail	1.5 Fail
1.8 Fail	—	1.7 Fail	1.3 Fail	1.2 Fail
1.1 Fail	1.7 Fail	—	1.3 Fail	1.4 Fail
1.3 Fail	1.3 Fail	1.3 Fail	—	1.2 Fail
1.5 Fail	1.2 Fail	1.4 Fail	1.2 Fail	—

White BG

1.9Fail

1.1Fail

1.8Fail

1.4Fail

1.3Fail

Black BG

11.0AAA

19.4AAA

11.5AAA

14.5AAA

16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACA7B

F8F8EB

C5C5C0

DFDFE1

E5E5D4

Deuteranopia

CCCE80

F9F9EC

C6C7C0

E1E3DF

E4E4D6

Tritanopia

D68B8E

FAEEEF

CBBFBF

EBDCDB

E2D9DA

Achromatopsia

B8B8B8

F6F6F6

C1C1C1

DADADA

E3E3E3

Shades & Tints Shades & Tints

#D8B868

Dark

Light

#FAF6E8

Dark

Light

#CCBCC1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8b868;
  --color-2: #faf6e8;
  --color-3: #ccbcc1;
  --color-4: #edcde7;
  --color-5: #e2e8ce;
}

SCSS

$color-1: #d8b868;
$color-2: #faf6e8;
$color-3: #ccbcc1;
$color-4: #edcde7;
$color-5: #e2e8ce;

TAILWIND

colors: {
  'brand-1': '#d8b868',
  'brand-2': '#faf6e8',
  'brand-3': '#ccbcc1',
  'brand-4': '#edcde7',
  'brand-5': '#e2e8ce',
}

RGB Array

[216, 184, 104], [250, 246, 232], [204, 188, 193], [237, 205, 231], [226, 232, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8B868, #FAF6E8, #CCBCC1, #EDCDE7, #E2E8CE 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: #d8b868; --color-2: #faf6e8; --color-3: #ccbcc1; --color-4: #edcde7; --color-5: #e2e8ce. 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