← Back to Editor

#F2ECDC · #F2E2BD · #E8D3A2 · #D1B792 · #9C886D

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2ECDC

Goose Yellow · Beige · Lemon Cream

HEX
#F2ECDC
RGB
rgb(242, 236, 220)
HSL
hsl(44, 46%, 91%)
HSB
hsb(44, 9%, 95%)
CMYK
cmyk(0%, 2%, 9%, 5%)
Oklch
oklch(94.3% 0.022 89.8)

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

#F2E2BD

Goose Yellow · Wheat · Lemon Cream

HEX
#F2E2BD
RGB
rgb(242, 226, 189)
HSL
hsl(42, 67%, 85%)
HSB
hsb(42, 22%, 95%)
CMYK
cmyk(0%, 7%, 22%, 5%)
Oklch
oklch(91.6% 0.052 87.4)

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

#E8D3A2

Goose Yellow · Wheat · Lemon Cream

HEX
#E8D3A2
RGB
rgb(232, 211, 162)
HSL
hsl(42, 60%, 77%)
HSB
hsb(42, 30%, 91%)
CMYK
cmyk(0%, 9%, 30%, 9%)
Oklch
oklch(87.2% 0.068 87.5)

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

#D1B792

Ginger · Tan · Warm Sun

HEX
#D1B792
RGB
rgb(209, 183, 146)
HSL
hsl(35, 41%, 70%)
HSB
hsb(35, 30%, 82%)
CMYK
cmyk(0%, 12%, 30%, 18%)
Oklch
oklch(79.3% 0.058 76.4)

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

#9C886D

Ginger · Gray · Warm Sun

HEX
#9C886D
RGB
rgb(156, 136, 109)
HSL
hsl(34, 19%, 52%)
HSB
hsb(34, 30%, 61%)
CMYK
cmyk(0%, 13%, 30%, 39%)
Oklch
oklch(63.8% 0.045 75.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2ECDC
DDE3F3

Analogous

F3E2DD
F2ECDC
EEF3DD

Triadic

F2ECDC
DDF3ED
EDDDF3

Split-Comp.

F2ECDC
DDEEF3
E2DDF3

Tetradic

F2ECDC
DDF3E2
DDE3F3
F3DDEE

Contrast Matrix WCAG 2.1 Contrast

F2ECDC
F2E2BD
E8D3A2
D1B792
9C886D
—
1.1
Fail
1.2
Fail
1.6
Fail
2.9
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
2.7
Fail
1.2
Fail
1.1
Fail
—
1.3
Fail
2.3
Fail
1.6
Fail
1.5
Fail
1.3
Fail
—
1.8
Fail
2.9
Fail
2.7
Fail
2.3
Fail
1.8
Fail
—
White BG
1.2Fail
1.3Fail
1.5Fail
1.9Fail
3.4AA Large
Black BG
17.8AAA
16.4AAA
14.3AAA
10.9AAA
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFE0
EBEBC6
DFDFAE
C6C69B
939374

Deuteranopia

F0F0E1
ECEDC8
E0E2B1
C7C99D
959675

Tritanopia

F2E3E4
F1CDCF
E7B7B9
D0A2A4
9B797A

Achromatopsia

ECECEC
E3E3E3
D4D4D4
BBBBBB
8B8B8B

Shades & Tints Shades & Tints

#F2ECDC

Dark
Light

#F2E2BD

Dark
Light

#E8D3A2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2ecdc;
  --color-2: #f2e2bd;
  --color-3: #e8d3a2;
  --color-4: #d1b792;
  --color-5: #9c886d;
}

SCSS

$color-1: #f2ecdc;
$color-2: #f2e2bd;
$color-3: #e8d3a2;
$color-4: #d1b792;
$color-5: #9c886d;

TAILWIND

colors: {
  'brand-1': '#f2ecdc',
  'brand-2': '#f2e2bd',
  'brand-3': '#e8d3a2',
  'brand-4': '#d1b792',
  'brand-5': '#9c886d',
}

RGB Array

[242, 236, 220], [242, 226, 189], [232, 211, 162], [209, 183, 146], [156, 136, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2ECDC, #F2E2BD, #E8D3A2, #D1B792, #9C886D 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: #f2ecdc; --color-2: #f2e2bd; --color-3: #e8d3a2; --color-4: #d1b792; --color-5: #9c886d. 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