← Back to Editor

#C89D7D · #D98C70 · #DF856B · #848C74 · #518F80

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

#C89D7D

Apricot · Tan · Warm Sun

HEX
#C89D7D
RGB
rgb(200, 157, 125)
HSL
hsl(26, 41%, 64%)
HSB
hsb(26, 38%, 78%)
CMYK
cmyk(0%, 21%, 37%, 22%)
Oklch
oklch(72.8% 0.068 58.1)

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

#D98C70

Apricot · DarkSalmon · Warm Sun

HEX
#D98C70
RGB
rgb(217, 140, 112)
HSL
hsl(16, 58%, 65%)
HSB
hsb(16, 48%, 85%)
CMYK
cmyk(0%, 35%, 48%, 15%)
Oklch
oklch(71.2% 0.103 40.7)

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

#DF856B

Peach Pink · DarkSalmon · Coral Red

HEX
#DF856B
RGB
rgb(223, 133, 107)
HSL
hsl(13, 64%, 65%)
HSB
hsb(13, 52%, 87%)
CMYK
cmyk(0%, 40%, 52%, 13%)
Oklch
oklch(70.7% 0.117 36.9)

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

#848C74

Grass Green · Gray · Warm Gray

HEX
#848C74
RGB
rgb(132, 140, 116)
HSL
hsl(80, 9%, 50%)
HSB
hsb(80, 17%, 55%)
CMYK
cmyk(6%, 0%, 17%, 45%)
Oklch
oklch(62.7% 0.036 122.4)

Traditional「Grass Green」· Paint「Warm Gray」· Creative Urban Concrete

#518F80

Mineral Blue · SlateGray · Mint Ice

HEX
#518F80
RGB
rgb(81, 143, 128)
HSL
hsl(165, 28%, 44%)
HSB
hsb(165, 43%, 56%)
CMYK
cmyk(43%, 0%, 10%, 44%)
Oklch
oklch(60.4% 0.069 176.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C89D7D
7EA8C9

Analogous

C97E83
C89D7D
C9C47E

Triadic

C89D7D
7EC99E
9E7EC9

Split-Comp.

C89D7D
7EC9C4
7E83C9

Tetradic

C89D7D
83C97E
7EA8C9
C47EC9

Contrast Matrix WCAG 2.1 Contrast

C89D7D
D98C70
DF856B
848C74
518F80
—
1.1
Fail
1.1
Fail
1.4
Fail
1.5
Fail
1.1
Fail
—
1.0
Fail
1.3
Fail
1.4
Fail
1.1
Fail
1.0
Fail
—
1.3
Fail
1.4
Fail
1.4
Fail
1.3
Fail
1.3
Fail
—
1.1
Fail
1.5
Fail
1.4
Fail
1.4
Fail
1.1
Fail
—
White BG
2.4Fail
2.6Fail
2.7Fail
3.5AA Large
3.8AA Large
Black BG
8.6AAA
7.9AAA
7.7AAA
6.0AA
5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B585
B8B777
B8B771
87887A
6C6C84

Deuteranopia

B8BB87
BCC278
BDC473
87867B
686485

Tritanopia

C68B8C
D57C7D
DB7677
847E7F
548687

Achromatopsia

A6A6A6
A0A0A0
9D9D9D
878787
7B7B7B

Shades & Tints Shades & Tints

#C89D7D

Dark
Light

#D98C70

Dark
Light

#DF856B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c89d7d;
  --color-2: #d98c70;
  --color-3: #df856b;
  --color-4: #848c74;
  --color-5: #518f80;
}

SCSS

$color-1: #c89d7d;
$color-2: #d98c70;
$color-3: #df856b;
$color-4: #848c74;
$color-5: #518f80;

TAILWIND

colors: {
  'brand-1': '#c89d7d',
  'brand-2': '#d98c70',
  'brand-3': '#df856b',
  'brand-4': '#848c74',
  'brand-5': '#518f80',
}

RGB Array

[200, 157, 125], [217, 140, 112], [223, 133, 107], [132, 140, 116], [81, 143, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C89D7D, #D98C70, #DF856B, #848C74, #518F80 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: #c89d7d; --color-2: #d98c70; --color-3: #df856b; --color-4: #848c74; --color-5: #518f80. 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