← Back to Editor

#C89D8D · #CC7D7A · #D33757 · #77362A · #ECA77D

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

#C89D8D

Apricot · Tan · Warm Sun

HEX
#C89D8D
RGB
rgb(200, 157, 141)
HSL
hsl(16, 35%, 67%)
HSB
hsb(16, 29%, 78%)
CMYK
cmyk(0%, 21%, 29%, 22%)
Oklch
oklch(73.1% 0.056 41.4)

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

#CC7D7A

Peach Pink · LightCoral · Coral Red

HEX
#CC7D7A
RGB
rgb(204, 125, 122)
HSL
hsl(2, 45%, 64%)
HSB
hsb(2, 40%, 80%)
CMYK
cmyk(0%, 39%, 40%, 20%)
Oklch
oklch(67.3% 0.099 22.4)

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

#D33757

Vermilion · Crimson · Passion Red

HEX
#D33757
RGB
rgb(211, 55, 87)
HSL
hsl(348, 64%, 52%)
HSB
hsb(348, 74%, 83%)
CMYK
cmyk(0%, 74%, 59%, 17%)
Oklch
oklch(58.1% 0.192 14.1)

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

#77362A

Crimson · Brown · Wine Red

HEX
#77362A
RGB
rgb(119, 54, 42)
HSL
hsl(9, 48%, 32%)
HSB
hsb(9, 65%, 47%)
CMYK
cmyk(0%, 55%, 65%, 53%)
Oklch
oklch(41.7% 0.094 32.0)

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

#ECA77D

Apricot · DarkSalmon · Warm Sun

HEX
#ECA77D
RGB
rgb(236, 167, 125)
HSL
hsl(23, 74%, 71%)
HSB
hsb(23, 47%, 93%)
CMYK
cmyk(0%, 29%, 47%, 7%)
Oklch
oklch(78.5% 0.099 52.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C89D8D
8DB9C8

Analogous

C88D9B
C89D8D
C8BB8D

Triadic

C89D8D
8DC89D
9D8DC8

Split-Comp.

C89D8D
8DC8BB
8D9BC8

Tetradic

C89D8D
9BC88D
8DB9C8
BB8DC8

Contrast Matrix WCAG 2.1 Contrast

C89D8D
CC7D7A
D33757
77362A
ECA77D
—
1.3
Fail
1.9
Fail
3.7
AA Large
1.2
Fail
1.3
Fail
—
1.5
Fail
2.9
Fail
1.5
Fail
1.9
Fail
1.5
Fail
—
1.9
Fail
2.3
Fail
3.7
AA Large
2.9
Fail
1.9
Fail
—
4.4
AA Large
1.2
Fail
1.5
Fail
2.3
Fail
4.4
AA Large
—
White BG
2.4Fail
3.1AA Large
4.7AA
9.0AAA
2.0Fail
Black BG
8.7AAA
6.8AA
4.5AA Large
2.3Fail
10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B591
AAA97B
8F8E4F
5B5A2D
CECE87

Deuteranopia

B8BB92
AEB47B
99A44D
5F642E
D2D78A

Tritanopia

C69495
C87B7B
CB4948
742F30
E98F91

Achromatopsia

A8A8A8
949494
696969
484848
B7B7B7

Shades & Tints Shades & Tints

#C89D8D

Dark
Light

#CC7D7A

Dark
Light

#D33757

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c89d8d;
  --color-2: #cc7d7a;
  --color-3: #d33757;
  --color-4: #77362a;
  --color-5: #eca77d;
}

SCSS

$color-1: #c89d8d;
$color-2: #cc7d7a;
$color-3: #d33757;
$color-4: #77362a;
$color-5: #eca77d;

TAILWIND

colors: {
  'brand-1': '#c89d8d',
  'brand-2': '#cc7d7a',
  'brand-3': '#d33757',
  'brand-4': '#77362a',
  'brand-5': '#eca77d',
}

RGB Array

[200, 157, 141], [204, 125, 122], [211, 55, 87], [119, 54, 42], [236, 167, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C89D8D, #CC7D7A, #D33757, #77362A, #ECA77D 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: #c89d8d; --color-2: #cc7d7a; --color-3: #d33757; --color-4: #77362a; --color-5: #eca77d. 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