← Back to Editor

#E89774 · #DE8974 · #D37A74 · #C96C74 · #BF5E74

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

#E89774

Apricot · DarkSalmon · Warm Sun

HEX
#E89774
RGB
rgb(232, 151, 116)
HSL
hsl(18, 72%, 68%)
HSB
hsb(18, 50%, 91%)
CMYK
cmyk(0%, 35%, 50%, 9%)
Oklch
oklch(75.0% 0.109 44.0)

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

#DE8974

Peach Pink · DarkSalmon · Coral Red

HEX
#DE8974
RGB
rgb(222, 137, 116)
HSL
hsl(12, 62%, 66%)
HSB
hsb(12, 48%, 87%)
CMYK
cmyk(0%, 38%, 48%, 13%)
Oklch
oklch(71.4% 0.109 34.7)

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

#D37A74

Peach Pink · LightCoral · Coral Red

HEX
#D37A74
RGB
rgb(211, 122, 116)
HSL
hsl(4, 52%, 64%)
HSB
hsb(4, 45%, 83%)
CMYK
cmyk(0%, 42%, 45%, 17%)
Oklch
oklch(67.5% 0.112 24.6)

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

#C96C74

Peach Pink · LightCoral · Coral Red

HEX
#C96C74
RGB
rgb(201, 108, 116)
HSL
hsl(355, 46%, 61%)
HSB
hsb(355, 46%, 79%)
CMYK
cmyk(0%, 46%, 42%, 21%)
Oklch
oklch(63.9% 0.118 15.5)

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

#BF5E74

Crimson · LightCoral · Passion Red

HEX
#BF5E74
RGB
rgb(191, 94, 116)
HSL
hsl(346, 43%, 56%)
HSB
hsb(346, 51%, 75%)
CMYK
cmyk(0%, 51%, 39%, 25%)
Oklch
oklch(60.4% 0.126 7.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E89774
73C5E8

Analogous

E8738A
E89774
E8D173

Triadic

E89774
73E896
9673E8

Split-Comp.

E89774
73E8D1
738AE8

Tetradic

E89774
8AE873
73C5E8
D173E8

Contrast Matrix WCAG 2.1 Contrast

E89774
DE8974
D37A74
C96C74
BF5E74
—
1.1
Fail
1.3
Fail
1.5
Fail
1.8
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.6
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.5
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.8
Fail
1.6
Fail
1.3
Fail
1.2
Fail
—
White BG
2.3Fail
2.6Fail
3.1AA Large
3.6AA Large
4.1AA Large
Black BG
9.1AAA
7.9AAA
6.8AA
5.9AA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C47C
B9B879
ACAC75
A1A072
95946F

Deuteranopia

CAD07E
BEC47A
B2B876
A6AD72
9BA26D

Tritanopia

E48385
DA7D7E
CF7777
C47170
BA6A6A

Achromatopsia

ABABAB
A0A0A0
949494
898989
7E7E7E

Shades & Tints Shades & Tints

#E89774

Dark
Light

#DE8974

Dark
Light

#D37A74

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e89774;
  --color-2: #de8974;
  --color-3: #d37a74;
  --color-4: #c96c74;
  --color-5: #bf5e74;
}

SCSS

$color-1: #e89774;
$color-2: #de8974;
$color-3: #d37a74;
$color-4: #c96c74;
$color-5: #bf5e74;

TAILWIND

colors: {
  'brand-1': '#e89774',
  'brand-2': '#de8974',
  'brand-3': '#d37a74',
  'brand-4': '#c96c74',
  'brand-5': '#bf5e74',
}

RGB Array

[232, 151, 116], [222, 137, 116], [211, 122, 116], [201, 108, 116], [191, 94, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E89774, #DE8974, #D37A74, #C96C74, #BF5E74 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: #e89774; --color-2: #de8974; --color-3: #d37a74; --color-4: #c96c74; --color-5: #bf5e74. 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