← Back to Editor

#FF8877 · #EABF8C · #D09B79 · #2B141E · #F5DDBB

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

#FF8877

Peach Pink · Salmon · Coral Red

HEX
#FF8877
RGB
rgb(255, 136, 119)
HSL
hsl(7, 100%, 73%)
HSB
hsb(7, 53%, 100%)
CMYK
cmyk(0%, 47%, 53%, 0%)
Oklch
oklch(75.5% 0.148 29.4)

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

#EABF8C

Goose Yellow · BurlyWood · Warm Sun

HEX
#EABF8C
RGB
rgb(234, 191, 140)
HSL
hsl(33, 69%, 73%)
HSB
hsb(33, 40%, 92%)
CMYK
cmyk(0%, 18%, 40%, 8%)
Oklch
oklch(83.1% 0.083 71.1)

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

#D09B79

Apricot · DarkSalmon · Warm Sun

HEX
#D09B79
RGB
rgb(208, 155, 121)
HSL
hsl(23, 48%, 65%)
HSB
hsb(23, 42%, 82%)
CMYK
cmyk(0%, 25%, 42%, 18%)
Oklch
oklch(73.2% 0.079 53.8)

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

#2B141E

Dark Violet · Black · Raspberry

HEX
#2B141E
RGB
rgb(43, 20, 30)
HSL
hsl(334, 37%, 12%)
HSB
hsb(334, 53%, 17%)
CMYK
cmyk(0%, 53%, 30%, 83%)
Oklch
oklch(22.8% 0.041 353.3)

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

#F5DDBB

Goose Yellow · Wheat · Peach Orange

HEX
#F5DDBB
RGB
rgb(245, 221, 187)
HSL
hsl(35, 74%, 85%)
HSB
hsb(35, 24%, 96%)
CMYK
cmyk(0%, 10%, 24%, 4%)
Oklch
oklch(90.9% 0.052 76.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF8877
75EFFF

Analogous

FF75AA
FF8877
FFCA75

Triadic

FF8877
75FF85
8575FF

Split-Comp.

FF8877
75FFCA
75AAFF

Tetradic

FF8877
AAFF75
75EFFF
CA75FF

Contrast Matrix WCAG 2.1 Contrast

FF8877
EABF8C
D09B79
2B141E
F5DDBB
—
1.4
Fail
1.0
Fail
7.4
AAA
1.8
Fail
1.4
Fail
—
1.4
Fail
10.1
AAA
1.3
Fail
1.0
Fail
1.4
Fail
—
7.1
AAA
1.8
Fail
7.4
AAA
10.1
AAA
7.1
AAA
—
13.1
AAA
1.8
Fail
1.3
Fail
1.8
Fail
13.1
AAA
—
White BG
2.3Fail
1.7Fail
2.4Fail
17.2AAA
1.3Fail
Black BG
9.0AAA
12.3AAA
8.6AAA
1.2Fail
15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCA7B
D7D798
B9B981
21211C
EBEAC3

Deuteranopia

D2DB7C
DADD9B
BCC083
22241B
ECEEC5

Tritanopia

F97E7F
E8A2A4
CD8889
2A1A19
F4CACB

Achromatopsia

AAAAAA
C6C6C6
A7A7A7
1C1C1C
E0E0E0

Shades & Tints Shades & Tints

#FF8877

Dark
Light

#EABF8C

Dark
Light

#D09B79

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff8877;
  --color-2: #eabf8c;
  --color-3: #d09b79;
  --color-4: #2b141e;
  --color-5: #f5ddbb;
}

SCSS

$color-1: #ff8877;
$color-2: #eabf8c;
$color-3: #d09b79;
$color-4: #2b141e;
$color-5: #f5ddbb;

TAILWIND

colors: {
  'brand-1': '#ff8877',
  'brand-2': '#eabf8c',
  'brand-3': '#d09b79',
  'brand-4': '#2b141e',
  'brand-5': '#f5ddbb',
}

RGB Array

[255, 136, 119], [234, 191, 140], [208, 155, 121], [43, 20, 30], [245, 221, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF8877, #EABF8C, #D09B79, #2B141E, #F5DDBB 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: #ff8877; --color-2: #eabf8c; --color-3: #d09b79; --color-4: #2b141e; --color-5: #f5ddbb. 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