← Back to Editor

#ECC987 · #F2A86C · #F37F64 · #DB2361 · #732849

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#ECC987

Goose Yellow · BurlyWood · Warm Sun

HEX
#ECC987
RGB
rgb(236, 201, 135)
HSL
hsl(39, 73%, 73%)
HSB
hsb(39, 43%, 93%)
CMYK
cmyk(0%, 15%, 43%, 7%)
Oklch
oklch(85.1% 0.093 82.7)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#F2A86C

Apricot · SandyBrown · Warm Sun

HEX
#F2A86C
RGB
rgb(242, 168, 108)
HSL
hsl(27, 84%, 69%)
HSB
hsb(27, 55%, 95%)
CMYK
cmyk(0%, 31%, 55%, 5%)
Oklch
oklch(79.1% 0.116 59.0)

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

#F37F64

Peach Pink · Salmon · Coral Red

HEX
#F37F64
RGB
rgb(243, 127, 100)
HSL
hsl(11, 86%, 67%)
HSB
hsb(11, 59%, 95%)
CMYK
cmyk(0%, 48%, 59%, 5%)
Oklch
oklch(72.2% 0.148 34.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#DB2361

Dark Violet · Crimson · Camellia

HEX
#DB2361
RGB
rgb(219, 35, 97)
HSL
hsl(340, 72%, 50%)
HSB
hsb(340, 84%, 86%)
CMYK
cmyk(0%, 84%, 56%, 14%)
Oklch
oklch(58.3% 0.216 8.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#732849

Dark Violet · Brown · Camellia

HEX
#732849
RGB
rgb(115, 40, 73)
HSL
hsl(334, 48%, 30%)
HSB
hsb(334, 65%, 45%)
CMYK
cmyk(0%, 65%, 37%, 55%)
Oklch
oklch(39.8% 0.111 356.1)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECC987
88ABEC

Analogous

EC9788
ECC987
DDEC88

Triadic

ECC987
88ECC9
C988EC

Split-Comp.

ECC987
88DDEC
9788EC

Tetradic

ECC987
88EC97
88ABEC
EC88DD

Contrast Matrix WCAG 2.1 Contrast

ECC987
F2A86C
F37F64
DB2361
732849
—
1.3
Fail
1.7
Fail
3.0
Fail
6.2
AA
1.3
Fail
—
1.3
Fail
2.4
Fail
5.0
AA
1.7
Fail
1.3
Fail
—
1.8
Fail
3.8
AA Large
3.0
Fail
2.4
Fail
1.8
Fail
—
2.1
Fail
6.2
AA
5.0
AA
3.8
AA Large
2.1
Fail
—
White BG
1.6Fail
2.0Fail
2.6Fail
4.7AA
9.9AAA
Black BG
13.3AAA
10.6AAA
8.0AAA
4.4AA Large
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDD97
D2D17B
C1C06B
8B8A52
535241

Deuteranopia

DFE29B
D6DC7E
C8D06C
96A44E
575D3F

Tritanopia

EAA4A6
EE8689
ED7071
D24644
6F3B39

Achromatopsia

CCCCCC
B7B7B7
9F9F9F
616161
424242

Shades & Tints Shades & Tints

#ECC987

Dark
Light

#F2A86C

Dark
Light

#F37F64

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecc987;
  --color-2: #f2a86c;
  --color-3: #f37f64;
  --color-4: #db2361;
  --color-5: #732849;
}

SCSS

$color-1: #ecc987;
$color-2: #f2a86c;
$color-3: #f37f64;
$color-4: #db2361;
$color-5: #732849;

TAILWIND

colors: {
  'brand-1': '#ecc987',
  'brand-2': '#f2a86c',
  'brand-3': '#f37f64',
  'brand-4': '#db2361',
  'brand-5': '#732849',
}

RGB Array

[236, 201, 135], [242, 168, 108], [243, 127, 100], [219, 35, 97], [115, 40, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECC987, #F2A86C, #F37F64, #DB2361, #732849 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: #ecc987; --color-2: #f2a86c; --color-3: #f37f64; --color-4: #db2361; --color-5: #732849. 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