← Back to Editor

#E36074 · #DE717A · #CA8C7E · #B0A084 · #97AF9E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E36074

Peach Pink · LightCoral · Coral Red

HEX
#E36074
RGB
rgb(227, 96, 116)
HSL
hsl(351, 70%, 63%)
HSB
hsb(351, 58%, 89%)
CMYK
cmyk(0%, 58%, 49%, 11%)
Oklch
oklch(65.8% 0.163 13.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#DE717A

Peach Pink · LightCoral · Coral Red

HEX
#DE717A
RGB
rgb(222, 113, 122)
HSL
hsl(355, 62%, 66%)
HSB
hsb(355, 49%, 87%)
CMYK
cmyk(0%, 49%, 45%, 13%)
Oklch
oklch(67.7% 0.136 16.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#CA8C7E

Peach Pink · DarkSalmon · Coral Red

HEX
#CA8C7E
RGB
rgb(202, 140, 126)
HSL
hsl(11, 42%, 64%)
HSB
hsb(11, 38%, 79%)
CMYK
cmyk(0%, 31%, 38%, 21%)
Oklch
oklch(69.8% 0.079 33.2)

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

#B0A084

Ginger · DarkGray · Warm Sun

HEX
#B0A084
RGB
rgb(176, 160, 132)
HSL
hsl(38, 22%, 60%)
HSB
hsb(38, 25%, 69%)
CMYK
cmyk(0%, 9%, 25%, 31%)
Oklch
oklch(71.2% 0.043 81.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#97AF9E

Celadon · DarkSeaGreen · Apple Green

HEX
#97AF9E
RGB
rgb(151, 175, 158)
HSL
hsl(138, 13%, 64%)
HSB
hsb(138, 14%, 69%)
CMYK
cmyk(14%, 0%, 10%, 31%)
Oklch
oklch(73.1% 0.036 154.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E36074
5FE3CF

Analogous

E35FB4
E36074
E38D5F

Triadic

E36074
72E35F
5F72E3

Split-Comp.

E36074
5FE38D
5FB4E3

Tetradic

E36074
B4E35F
5FE3CF
8D5FE3

Contrast Matrix WCAG 2.1 Contrast

E36074
DE717A
CA8C7E
B0A084
97AF9E
—
1.1
Fail
1.2
Fail
1.3
Fail
1.4
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
White BG
3.4AA Large
3.1AA Large
2.8Fail
2.6Fail
2.3Fail
Black BG
6.2AA
6.7AA
7.6AAA
8.2AAA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA96F
AFAE78
AFAF81
A9A98B
A1A2A2

Deuteranopia

B2BC6E
B5BD77
B3B782
AAAB8C
A09EA3

Tritanopia

DC6B6B
D97676
C78485
AF9091
98A5A6

Achromatopsia

898989
939393
9D9D9D
A2A2A2
A6A6A6

Shades & Tints Shades & Tints

#E36074

Dark
Light

#DE717A

Dark
Light

#CA8C7E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e36074;
  --color-2: #de717a;
  --color-3: #ca8c7e;
  --color-4: #b0a084;
  --color-5: #97af9e;
}

SCSS

$color-1: #e36074;
$color-2: #de717a;
$color-3: #ca8c7e;
$color-4: #b0a084;
$color-5: #97af9e;

TAILWIND

colors: {
  'brand-1': '#e36074',
  'brand-2': '#de717a',
  'brand-3': '#ca8c7e',
  'brand-4': '#b0a084',
  'brand-5': '#97af9e',
}

RGB Array

[227, 96, 116], [222, 113, 122], [202, 140, 126], [176, 160, 132], [151, 175, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E36074, #DE717A, #CA8C7E, #B0A084, #97AF9E 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: #e36074; --color-2: #de717a; --color-3: #ca8c7e; --color-4: #b0a084; --color-5: #97af9e. 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