← Back to Editor

#897A81 · #CB986B · #DBBA77 · #DED08F · #E7DBB3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#897A81

Ash · Gray · Warm Gray

HEX
#897A81
RGB
rgb(137, 122, 129)
HSL
hsl(332, 6%, 51%)
HSB
hsb(332, 11%, 54%)
CMYK
cmyk(0%, 11%, 6%, 46%)
Oklch
oklch(59.5% 0.021 347.8)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#CB986B

Apricot · DarkSalmon · Warm Sun

HEX
#CB986B
RGB
rgb(203, 152, 107)
HSL
hsl(28, 48%, 61%)
HSB
hsb(28, 47%, 80%)
CMYK
cmyk(0%, 25%, 47%, 20%)
Oklch
oklch(71.8% 0.086 62.2)

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

#DBBA77

Ginger · BurlyWood · Sunflower

HEX
#DBBA77
RGB
rgb(219, 186, 119)
HSL
hsl(40, 58%, 66%)
HSB
hsb(40, 46%, 86%)
CMYK
cmyk(0%, 15%, 46%, 14%)
Oklch
oklch(80.3% 0.093 84.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#DED08F

Goose Yellow · BurlyWood · Sunflower

HEX
#DED08F
RGB
rgb(222, 208, 143)
HSL
hsl(49, 54%, 72%)
HSB
hsb(49, 36%, 87%)
CMYK
cmyk(0%, 6%, 36%, 13%)
Oklch
oklch(85.4% 0.085 97.5)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#E7DBB3

Goose Yellow · Wheat · Lemon Cream

HEX
#E7DBB3
RGB
rgb(231, 219, 179)
HSL
hsl(46, 52%, 80%)
HSB
hsb(46, 23%, 91%)
CMYK
cmyk(0%, 5%, 23%, 9%)
Oklch
oklch(89.1% 0.054 93.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

897A81
7B8A83

Analogous

8A7B89
897A81
8A7B7B

Triadic

897A81
828A7B
7B828A

Split-Comp.

897A81
7B8A7B
7B898A

Tetradic

897A81
898A7B
7B8A83
7B7B8A

Contrast Matrix WCAG 2.1 Contrast

897A81
CB986B
DBBA77
DED08F
E7DBB3
—
1.6
Fail
2.2
Fail
2.6
Fail
2.9
Fail
1.6
Fail
—
1.4
Fail
1.6
Fail
1.8
Fail
2.2
Fail
1.4
Fail
—
1.2
Fail
1.3
Fail
2.6
Fail
1.6
Fail
1.2
Fail
—
1.1
Fail
2.9
Fail
1.8
Fail
1.3
Fail
1.1
Fail
—
White BG
4.1AA Large
2.5Fail
1.9Fail
1.6Fail
1.4Fail
Black BG
5.2AA
8.2AAA
11.3AAA
13.5AAA
15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

83827F
B5B476
CDCC87
D8D89F
E2E2BD

Deuteranopia

83857F
B8BC79
CFD18B
D9DAA3
E3E3BF

Tritanopia

887E7E
C87E80
D99497
DDABAE
E6C4C6

Achromatopsia

7F7F7F
A2A2A2
BCBCBC
CDCDCD
DADADA

Shades & Tints Shades & Tints

#897A81

Dark
Light

#CB986B

Dark
Light

#DBBA77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #897a81;
  --color-2: #cb986b;
  --color-3: #dbba77;
  --color-4: #ded08f;
  --color-5: #e7dbb3;
}

SCSS

$color-1: #897a81;
$color-2: #cb986b;
$color-3: #dbba77;
$color-4: #ded08f;
$color-5: #e7dbb3;

TAILWIND

colors: {
  'brand-1': '#897a81',
  'brand-2': '#cb986b',
  'brand-3': '#dbba77',
  'brand-4': '#ded08f',
  'brand-5': '#e7dbb3',
}

RGB Array

[137, 122, 129], [203, 152, 107], [219, 186, 119], [222, 208, 143], [231, 219, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #897A81, #CB986B, #DBBA77, #DED08F, #E7DBB3 is ideal for: health products, baby brands, fresh-style blogs. 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: #897a81; --color-2: #cb986b; --color-3: #dbba77; --color-4: #ded08f; --color-5: #e7dbb3. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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