← Back to Editor

#86391D · #E06757 · #DD9389 · #F1A77E · #FEC1CD

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

#86391D

Tangerine · Brown · Amber Brown

HEX
#86391D
RGB
rgb(134, 57, 29)
HSL
hsl(16, 64%, 32%)
HSB
hsb(16, 78%, 53%)
CMYK
cmyk(0%, 57%, 78%, 47%)
Oklch
oklch(44.4% 0.113 39.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#E06757

Peach Pink · Tomato · Coral Red

HEX
#E06757
RGB
rgb(224, 103, 87)
HSL
hsl(7, 69%, 61%)
HSB
hsb(7, 61%, 88%)
CMYK
cmyk(0%, 54%, 61%, 12%)
Oklch
oklch(65.8% 0.154 29.5)

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

#DD9389

Peach Pink · DarkSalmon · Coral Red

HEX
#DD9389
RGB
rgb(221, 147, 137)
HSL
hsl(7, 55%, 70%)
HSB
hsb(7, 38%, 87%)
CMYK
cmyk(0%, 33%, 38%, 13%)
Oklch
oklch(73.5% 0.092 27.9)

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

#F1A77E

Apricot · LightSalmon · Warm Sun

HEX
#F1A77E
RGB
rgb(241, 167, 126)
HSL
hsl(21, 80%, 72%)
HSB
hsb(21, 48%, 95%)
CMYK
cmyk(0%, 31%, 48%, 5%)
Oklch
oklch(79.1% 0.104 49.7)

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

#FEC1CD

Peach Pink · Pink · Cherry Blossom

HEX
#FEC1CD
RGB
rgb(254, 193, 205)
HSL
hsl(348, 97%, 88%)
HSB
hsb(348, 24%, 100%)
CMYK
cmyk(0%, 24%, 19%, 0%)
Oklch
oklch(86.9% 0.071 5.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86391D
1D6A86

Analogous

861D36
86391D
866D1D

Triadic

86391D
1D8639
391D86

Split-Comp.

86391D
1D866D
1D3686

Tetradic

86391D
36861D
1D6A86
6D1D86

Contrast Matrix WCAG 2.1 Contrast

86391D
E06757
DD9389
F1A77E
FEC1CD
—
2.4
Fail
3.3
AA Large
4.0
AA Large
5.2
AA
2.4
Fail
—
1.4
Fail
1.7
Fail
2.2
Fail
3.3
AA Large
1.4
Fail
—
1.2
Fail
1.6
Fail
4.0
AA Large
1.7
Fail
1.2
Fail
—
1.3
Fail
5.2
AA
2.2
Fail
1.6
Fail
1.3
Fail
—
White BG
8.0AAA
3.4AA Large
2.4Fail
2.0Fail
1.5Fail
Black BG
2.6Fail
6.2AA
8.6AAA
10.6AAA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

656424
ACAB5B
BDBC8B
D1D088
E4E3CA

Deuteranopia

696F25
B3BC5C
C1C78C
D5DB8A
E7ECC9

Tritanopia

82292A
DA5E5F
D98D8E
ED9091
FBC8C7

Achromatopsia

4D4D4D
898989
A8A8A8
B8B8B8
D5D5D5

Shades & Tints Shades & Tints

#86391D

Dark
Light

#E06757

Dark
Light

#DD9389

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86391d;
  --color-2: #e06757;
  --color-3: #dd9389;
  --color-4: #f1a77e;
  --color-5: #fec1cd;
}

SCSS

$color-1: #86391d;
$color-2: #e06757;
$color-3: #dd9389;
$color-4: #f1a77e;
$color-5: #fec1cd;

TAILWIND

colors: {
  'brand-1': '#86391d',
  'brand-2': '#e06757',
  'brand-3': '#dd9389',
  'brand-4': '#f1a77e',
  'brand-5': '#fec1cd',
}

RGB Array

[134, 57, 29], [224, 103, 87], [221, 147, 137], [241, 167, 126], [254, 193, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86391D, #E06757, #DD9389, #F1A77E, #FEC1CD 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: #86391d; --color-2: #e06757; --color-3: #dd9389; --color-4: #f1a77e; --color-5: #fec1cd. 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