← Back to Editor

#E74344 · #F6AE1E · #59868A · #BCDCCD · #FAE5C9

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

#E74344

Vermilion · Tomato · Passion Red

HEX
#E74344
RGB
rgb(231, 67, 68)
HSL
hsl(360, 77%, 58%)
HSB
hsb(360, 71%, 91%)
CMYK
cmyk(0%, 71%, 71%, 9%)
Oklch
oklch(62.3% 0.201 24.9)

Traditional「Vermilion」· Paint「Passion Red」· Creative Soft Aurora

#F6AE1E

Ginger · GoldenRod · Sunflower

HEX
#F6AE1E
RGB
rgb(246, 174, 30)
HSL
hsl(40, 92%, 54%)
HSB
hsb(40, 88%, 96%)
CMYK
cmyk(0%, 29%, 88%, 4%)
Oklch
oklch(79.9% 0.161 77.5)

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

#59868A

Slate Blue · SlateGray · Mint Ice

HEX
#59868A
RGB
rgb(89, 134, 138)
HSL
hsl(185, 22%, 45%)
HSB
hsb(185, 36%, 54%)
CMYK
cmyk(36%, 3%, 0%, 46%)
Oklch
oklch(58.9% 0.049 203.0)

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

#BCDCCD

Jade · LightGray · Apple Green

HEX
#BCDCCD
RGB
rgb(188, 220, 205)
HSL
hsl(152, 31%, 80%)
HSB
hsb(152, 15%, 86%)
CMYK
cmyk(15%, 0%, 7%, 14%)
Oklch
oklch(86.7% 0.040 165.5)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#FAE5C9

Goose Yellow · Bisque · Peach Orange

HEX
#FAE5C9
RGB
rgb(250, 229, 201)
HSL
hsl(34, 83%, 88%)
HSB
hsb(34, 20%, 98%)
CMYK
cmyk(0%, 8%, 20%, 2%)
Oklch
oklch(93.2% 0.043 75.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E74344
41E6E6

Analogous

E64194
E74344
E69441

Triadic

E74344
41E641
4141E6

Split-Comp.

E74344
41E694
4194E6

Tetradic

E74344
94E641
41E6E6
9441E6

Contrast Matrix WCAG 2.1 Contrast

E74344
F6AE1E
59868A
BCDCCD
FAE5C9
—
2.1
Fail
1.0
Fail
2.7
Fail
3.2
AA Large
2.1
Fail
—
2.1
Fail
1.3
Fail
1.6
Fail
1.0
Fail
2.1
Fail
—
2.7
Fail
3.3
AA Large
2.7
Fail
1.3
Fail
2.7
Fail
—
1.2
Fail
3.2
AA Large
1.6
Fail
3.3
AA Large
1.2
Fail
—
White BG
4.0AA Large
1.9Fail
4.0AA Large
1.5Fail
1.2Fail
Black BG
5.3AA
11.0AAA
5.2AA
14.3AAA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A09F44
D7D641
6C6D89
CACAD1
F1F1D0

Deuteranopia

AAB644
DBE049
6A6789
C8C6D2
F2F4D1

Tritanopia

DF4444
F25C62
5B8888
BED3D4
F9D5D6

Achromatopsia

747474
B3B3B3
797979
D1D1D1
E8E8E8

Shades & Tints Shades & Tints

#E74344

Dark
Light

#F6AE1E

Dark
Light

#59868A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e74344;
  --color-2: #f6ae1e;
  --color-3: #59868a;
  --color-4: #bcdccd;
  --color-5: #fae5c9;
}

SCSS

$color-1: #e74344;
$color-2: #f6ae1e;
$color-3: #59868a;
$color-4: #bcdccd;
$color-5: #fae5c9;

TAILWIND

colors: {
  'brand-1': '#e74344',
  'brand-2': '#f6ae1e',
  'brand-3': '#59868a',
  'brand-4': '#bcdccd',
  'brand-5': '#fae5c9',
}

RGB Array

[231, 67, 68], [246, 174, 30], [89, 134, 138], [188, 220, 205], [250, 229, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E74344, #F6AE1E, #59868A, #BCDCCD, #FAE5C9 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: #e74344; --color-2: #f6ae1e; --color-3: #59868a; --color-4: #bcdccd; --color-5: #fae5c9. 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