← Back to Editor

#F2ECAE · #E1DC80 · #E0C069 · #B3987A · #6A6674

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F2ECAE

Fresh Green · Wheat · Lemon Cream

HEX
#F2ECAE
RGB
rgb(242, 236, 174)
HSL
hsl(55, 72%, 82%)
HSB
hsb(55, 28%, 95%)
CMYK
cmyk(0%, 2%, 28%, 5%)
Oklch
oklch(93.3% 0.080 103.2)

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

#E1DC80

Fresh Green · Khaki · Sunflower

HEX
#E1DC80
RGB
rgb(225, 220, 128)
HSL
hsl(57, 62%, 69%)
HSB
hsb(57, 43%, 88%)
CMYK
cmyk(0%, 2%, 43%, 12%)
Oklch
oklch(87.9% 0.114 105.8)

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

#E0C069

Ginger · BurlyWood · Sunflower

HEX
#E0C069
RGB
rgb(224, 192, 105)
HSL
hsl(44, 66%, 65%)
HSB
hsb(44, 53%, 88%)
CMYK
cmyk(0%, 14%, 53%, 12%)
Oklch
oklch(81.8% 0.113 89.6)

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

#B3987A

Ginger · Tan · Warm Sun

HEX
#B3987A
RGB
rgb(179, 152, 122)
HSL
hsl(32, 27%, 59%)
HSB
hsb(32, 32%, 70%)
CMYK
cmyk(0%, 15%, 32%, 30%)
Oklch
oklch(69.6% 0.053 69.7)

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

#6A6674

Ink Gray · DimGray · Warm Gray

HEX
#6A6674
RGB
rgb(106, 102, 116)
HSL
hsl(257, 6%, 43%)
HSB
hsb(257, 12%, 45%)
CMYK
cmyk(9%, 12%, 0%, 55%)
Oklch
oklch(51.9% 0.022 298.7)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2ECAE
B0B6F2

Analogous

F2CCB0
F2ECAE
D7F2B0

Triadic

F2ECAE
B0F2ED
EDB0F2

Split-Comp.

F2ECAE
B0D7F2
CCB0F2

Tetradic

F2ECAE
B0F2CC
B0B6F2
F2B0D7

Contrast Matrix WCAG 2.1 Contrast

F2ECAE
E1DC80
E0C069
B3987A
6A6674
—
1.2
Fail
1.5
Fail
2.3
Fail
4.6
AA
1.2
Fail
—
1.2
Fail
1.9
Fail
3.9
AA Large
1.5
Fail
1.2
Fail
—
1.5
Fail
3.2
AA Large
2.3
Fail
1.9
Fail
1.5
Fail
—
2.0
Fail
4.6
AA
3.9
AA Large
3.2
AA Large
2.0
Fail
—
White BG
1.2Fail
1.4Fail
1.8Fail
2.7Fail
5.6AA
Black BG
17.4AAA
14.8AAA
11.9AAA
7.7AAA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFBD
DFDF96
D2D27E
A7A781
686871

Deuteranopia

F0F0C1
DFE09C
D4D683
A9AB83
696970

Tritanopia

F2C9CB
E1A8AC
DE8F92
B28788
6A6E6D

Achromatopsia

E7E7E7
D3D3D3
C0C0C0
9D9D9D
696969

Shades & Tints Shades & Tints

#F2ECAE

Dark
Light

#E1DC80

Dark
Light

#E0C069

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2ecae;
  --color-2: #e1dc80;
  --color-3: #e0c069;
  --color-4: #b3987a;
  --color-5: #6a6674;
}

SCSS

$color-1: #f2ecae;
$color-2: #e1dc80;
$color-3: #e0c069;
$color-4: #b3987a;
$color-5: #6a6674;

TAILWIND

colors: {
  'brand-1': '#f2ecae',
  'brand-2': '#e1dc80',
  'brand-3': '#e0c069',
  'brand-4': '#b3987a',
  'brand-5': '#6a6674',
}

RGB Array

[242, 236, 174], [225, 220, 128], [224, 192, 105], [179, 152, 122], [106, 102, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2ECAE, #E1DC80, #E0C069, #B3987A, #6A6674 is ideal for: corporate websites, product showcases, portfolios. 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: #f2ecae; --color-2: #e1dc80; --color-3: #e0c069; --color-4: #b3987a; --color-5: #6a6674. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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