← Back to Editor

#F0ECC9 · #E3B34E · #D54E31 · #503D2E · #067889

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F0ECC9

Fresh Green · Bisque · Lemon Cream

HEX
#F0ECC9
RGB
rgb(240, 236, 201)
HSL
hsl(54, 57%, 86%)
HSB
hsb(54, 16%, 94%)
CMYK
cmyk(0%, 2%, 16%, 6%)
Oklch
oklch(93.7% 0.046 101.9)

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

#E3B34E

Ginger · SandyBrown · Sunflower

HEX
#E3B34E
RGB
rgb(227, 179, 78)
HSL
hsl(41, 73%, 60%)
HSB
hsb(41, 66%, 89%)
CMYK
cmyk(0%, 21%, 66%, 11%)
Oklch
oklch(79.2% 0.130 83.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D54E31

Vermilion · Chocolate · Passion Red

HEX
#D54E31
RGB
rgb(213, 78, 49)
HSL
hsl(11, 66%, 51%)
HSB
hsb(11, 77%, 84%)
CMYK
cmyk(0%, 63%, 77%, 16%)
Oklch
oklch(60.3% 0.176 33.8)

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

#503D2E

Tangerine · DarkOliveGreen · Cinnamon

HEX
#503D2E
RGB
rgb(80, 61, 46)
HSL
hsl(26, 27%, 25%)
HSB
hsb(26, 43%, 31%)
CMYK
cmyk(0%, 24%, 42%, 69%)
Oklch
oklch(37.6% 0.036 59.7)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#067889

Lake Blue · Teal · Mint Ice

HEX
#067889
RGB
rgb(6, 120, 137)
HSL
hsl(188, 92%, 28%)
HSB
hsb(188, 96%, 54%)
CMYK
cmyk(96%, 12%, 0%, 46%)
Oklch
oklch(52.6% 0.090 212.1)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0ECC9
C7CBF0

Analogous

F0D7C7
F0ECC9
DFF0C7

Triadic

F0ECC9
C7F0EC
ECC7F0

Split-Comp.

F0ECC9
C7DFF0
D7C7F0

Tetradic

F0ECC9
C7F0D7
C7CBF0
F0C7DF

Contrast Matrix WCAG 2.1 Contrast

F0ECC9
E3B34E
D54E31
503D2E
067889
—
1.6
Fail
3.5
AA Large
8.6
AAA
4.3
AA Large
1.6
Fail
—
2.2
Fail
5.3
AA
2.7
Fail
3.5
AA Large
2.2
Fail
—
2.4
Fail
1.2
Fail
8.6
AAA
5.3
AA
2.4
Fail
—
2.0
Fail
4.3
AA Large
2.7
Fail
1.2
Fail
2.0
Fail
—
White BG
1.2Fail
1.9Fail
4.2AA Large
10.3AAA
5.2AA
Black BG
17.5AAA
10.8AAA
5.0AA
2.0Fail
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEED1
CECE66
9B9938
484832
373885

Deuteranopia

EFEFD4
D1D56C
A2AD3A
494A33
312884

Tritanopia

F0D8DA
E17A7E
CE3E3F
4F3435
0C8281

Achromatopsia

E9E9E9
B6B6B6
737373
414141
585858

Shades & Tints Shades & Tints

#F0ECC9

Dark
Light

#E3B34E

Dark
Light

#D54E31

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0ecc9;
  --color-2: #e3b34e;
  --color-3: #d54e31;
  --color-4: #503d2e;
  --color-5: #067889;
}

SCSS

$color-1: #f0ecc9;
$color-2: #e3b34e;
$color-3: #d54e31;
$color-4: #503d2e;
$color-5: #067889;

TAILWIND

colors: {
  'brand-1': '#f0ecc9',
  'brand-2': '#e3b34e',
  'brand-3': '#d54e31',
  'brand-4': '#503d2e',
  'brand-5': '#067889',
}

RGB Array

[240, 236, 201], [227, 179, 78], [213, 78, 49], [80, 61, 46], [6, 120, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0ECC9, #E3B34E, #D54E31, #503D2E, #067889 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f0ecc9; --color-2: #e3b34e; --color-3: #d54e31; --color-4: #503d2e; --color-5: #067889. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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