← Back to Editor

#DE8D6A · #E56159 · #B86A6D · #887379 · #3D8087

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DE8D6A

Apricot · DarkSalmon · Warm Sun

HEX
#DE8D6A
RGB
rgb(222, 141, 106)
HSL
hsl(18, 64%, 64%)
HSB
hsb(18, 52%, 87%)
CMYK
cmyk(0%, 36%, 52%, 13%)
Oklch
oklch(71.9% 0.110 44.0)

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

#E56159

Peach Pink · Tomato · Coral Red

HEX
#E56159
RGB
rgb(229, 97, 89)
HSL
hsl(3, 73%, 62%)
HSB
hsb(3, 61%, 90%)
CMYK
cmyk(0%, 58%, 61%, 10%)
Oklch
oklch(65.7% 0.166 26.1)

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

#B86A6D

Crimson · Gray · Passion Red

HEX
#B86A6D
RGB
rgb(184, 106, 109)
HSL
hsl(358, 35%, 57%)
HSB
hsb(358, 42%, 72%)
CMYK
cmyk(0%, 42%, 41%, 28%)
Oklch
oklch(61.2% 0.100 18.0)

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

#887379

Dark Violet · Gray · Warm Gray

HEX
#887379
RGB
rgb(136, 115, 121)
HSL
hsl(343, 8%, 49%)
HSB
hsb(343, 15%, 53%)
CMYK
cmyk(0%, 15%, 11%, 47%)
Oklch
oklch(57.7% 0.028 358.9)

Traditional「Dark Violet」· Paint「Warm Gray」· Creative Urban Concrete

#3D8087

Slate Blue · SteelBlue · Mint Ice

HEX
#3D8087
RGB
rgb(61, 128, 135)
HSL
hsl(186, 38%, 38%)
HSB
hsb(186, 55%, 53%)
CMYK
cmyk(55%, 5%, 0%, 47%)
Oklch
oklch(55.9% 0.069 204.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE8D6A
68BBDE

Analogous

DE6880
DE8D6A
DEC668

Triadic

DE8D6A
68DE8C
8C68DE

Split-Comp.

DE8D6A
68DEC6
6880DE

Tetradic

DE8D6A
80DE68
68BBDE
C668DE

Contrast Matrix WCAG 2.1 Contrast

DE8D6A
E56159
B86A6D
887379
3D8087
—
1.3
Fail
1.5
Fail
1.7
Fail
1.8
Fail
1.3
Fail
—
1.2
Fail
1.3
Fail
1.3
Fail
1.5
Fail
1.2
Fail
—
1.1
Fail
1.1
Fail
1.7
Fail
1.3
Fail
1.1
Fail
—
1.0
Fail
1.8
Fail
1.3
Fail
1.1
Fail
1.0
Fail
—
White BG
2.6Fail
3.4AA Large
3.9AA Large
4.4AA Large
4.5AA
Black BG
8.1AAA
6.2AA
5.3AA
4.8AA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBA72
ACAB5B
96966C
7F7F78
5A5B85

Deuteranopia

C0C674
B4BD5B
9BA16C
808277
565185

Tritanopia

DA797B
DE5C5D
B46C6C
877676
408484

Achromatopsia

A1A1A1
888888
828282
7A7A7A
6D6D6D

Shades & Tints Shades & Tints

#DE8D6A

Dark
Light

#E56159

Dark
Light

#B86A6D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de8d6a;
  --color-2: #e56159;
  --color-3: #b86a6d;
  --color-4: #887379;
  --color-5: #3d8087;
}

SCSS

$color-1: #de8d6a;
$color-2: #e56159;
$color-3: #b86a6d;
$color-4: #887379;
$color-5: #3d8087;

TAILWIND

colors: {
  'brand-1': '#de8d6a',
  'brand-2': '#e56159',
  'brand-3': '#b86a6d',
  'brand-4': '#887379',
  'brand-5': '#3d8087',
}

RGB Array

[222, 141, 106], [229, 97, 89], [184, 106, 109], [136, 115, 121], [61, 128, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DE8D6A, #E56159, #B86A6D, #887379, #3D8087 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #de8d6a; --color-2: #e56159; --color-3: #b86a6d; --color-4: #887379; --color-5: #3d8087. 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. 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 tech, SaaS, healthcare, eco industries. 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