#D1CEC4 + #F3E7DE + #FBE4D1 + #EFD6C2 + #9D7665 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D1CEC4

Goose Yellow · LightGray · Lemon Cream

HEX

#D1CEC4

RGB

rgb(209, 206, 196)

HSL

hsl(46, 12%, 79%)

HSB

hsb(46, 6%, 82%)

CMYK

cmyk(0%, 1%, 6%, 18%)

Oklch

oklch(85.1% 0.014 93.0)

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

#F3E7DE

Apricot · Linen · Peach Orange

HEX

#F3E7DE

RGB

rgb(243, 231, 222)

HSL

hsl(26, 47%, 91%)

HSB

hsb(26, 9%, 95%)

CMYK

cmyk(0%, 5%, 9%, 5%)

Oklch

oklch(93.5% 0.018 59.5)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FBE4D1

Apricot · Bisque · Peach Orange

HEX

#FBE4D1

RGB

rgb(251, 228, 209)

HSL

hsl(27, 84%, 90%)

HSB

hsb(27, 17%, 98%)

CMYK

cmyk(0%, 9%, 17%, 2%)

Oklch

oklch(93.2% 0.036 61.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#EFD6C2

Apricot · Wheat · Peach Orange

HEX

#EFD6C2

RGB

rgb(239, 214, 194)

HSL

hsl(27, 58%, 85%)

HSB

hsb(27, 19%, 94%)

CMYK

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

Oklch

oklch(89.1% 0.039 61.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#9D7665

Tangerine · Gray · Warm Sun

HEX

#9D7665

RGB

rgb(157, 118, 101)

HSL

hsl(18, 22%, 51%)

HSB

hsb(18, 36%, 62%)

CMYK

cmyk(0%, 25%, 36%, 38%)

Oklch

oklch(60.0% 0.055 44.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1CEC4

C3C6D0

Analogous

D0C6C3

D1CEC4

CCD0C3

Triadic

D1CEC4

C3D0CD

CDC3D0

Split-Comp.

D1CEC4

C3CCD0

C6C3D0

Tetradic

D1CEC4

C3D0C6

C3C6D0

D0C3CC

Contrast Matrix WCAG 2.1 Contrast

D1CEC4	F3E7DE	FBE4D1	EFD6C2	9D7665
—	1.3 Fail	1.3 Fail	1.1 Fail	2.6 Fail
1.3 Fail	—	1.0 Fail	1.1 Fail	3.3 AA Large
1.3 Fail	1.0 Fail	—	1.1 Fail	3.3 AA Large
1.1 Fail	1.1 Fail	1.1 Fail	—	2.9 Fail
2.6 Fail	3.3 AA Large	3.3 AA Large	2.9 Fail	—

White BG

1.6Fail

1.2Fail

1.4Fail

4.0AA Large

Black BG

13.3AAA

17.3AAA

17.1AAA

15.1AAA

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0C6

EEEEE0

F1F1D6

E4E4C7

8C8C69

Deuteranopia

D0D0C7

EFEFE1

F2F4D7

E6E8C8

8E916A

Tritanopia

D1C8C9

F2E2E2

FAD9DA

EECBCC

9B6C6D

Achromatopsia

CECECE

EAEAEA

E9E9E9

DBDBDB

808080

Shades & Tints Shades & Tints

#D1CEC4

Dark

Light

#F3E7DE

Dark

Light

#FBE4D1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1cec4;
  --color-2: #f3e7de;
  --color-3: #fbe4d1;
  --color-4: #efd6c2;
  --color-5: #9d7665;
}

SCSS

$color-1: #d1cec4;
$color-2: #f3e7de;
$color-3: #fbe4d1;
$color-4: #efd6c2;
$color-5: #9d7665;

TAILWIND

colors: {
  'brand-1': '#d1cec4',
  'brand-2': '#f3e7de',
  'brand-3': '#fbe4d1',
  'brand-4': '#efd6c2',
  'brand-5': '#9d7665',
}

RGB Array

[209, 206, 196], [243, 231, 222], [251, 228, 209], [239, 214, 194], [157, 118, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1CEC4, #F3E7DE, #FBE4D1, #EFD6C2, #9D7665 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: #d1cec4; --color-2: #f3e7de; --color-3: #fbe4d1; --color-4: #efd6c2; --color-5: #9d7665. 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