← Back to Editor

#D9D6AF · #D1B78E · #ABA974 · #97AB8A · #57877E

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

#D9D6AF

Fresh Green · Wheat · Lemon Cream

HEX
#D9D6AF
RGB
rgb(217, 214, 175)
HSL
hsl(56, 36%, 77%)
HSB
hsb(56, 19%, 85%)
CMYK
cmyk(0%, 1%, 19%, 15%)
Oklch
oklch(86.9% 0.052 103.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#D1B78E

Ginger · Tan · Warm Sun

HEX
#D1B78E
RGB
rgb(209, 183, 142)
HSL
hsl(37, 42%, 69%)
HSB
hsb(37, 32%, 82%)
CMYK
cmyk(0%, 12%, 32%, 18%)
Oklch
oklch(79.2% 0.062 78.9)

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

#ABA974

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ABA974
RGB
rgb(171, 169, 116)
HSL
hsl(58, 25%, 56%)
HSB
hsb(58, 32%, 67%)
CMYK
cmyk(0%, 1%, 32%, 33%)
Oklch
oklch(72.3% 0.072 106.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#97AB8A

Celadon · DarkSeaGreen · Apple Green

HEX
#97AB8A
RGB
rgb(151, 171, 138)
HSL
hsl(96, 16%, 61%)
HSB
hsb(96, 19%, 67%)
CMYK
cmyk(12%, 0%, 19%, 33%)
Oklch
oklch(71.7% 0.052 133.1)

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

#57877E

Mineral Blue · SlateGray · Mint Ice

HEX
#57877E
RGB
rgb(87, 135, 126)
HSL
hsl(169, 22%, 44%)
HSB
hsb(169, 36%, 53%)
CMYK
cmyk(36%, 0%, 7%, 47%)
Oklch
oklch(58.6% 0.054 181.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9D6AF
AFB2D9

Analogous

D9C2AF
D9D6AF
C7D9AF

Triadic

D9D6AF
AFD9D7
D7AFD9

Split-Comp.

D9D6AF
AFC7D9
C2AFD9

Tetradic

D9D6AF
AFD9C2
AFB2D9
D9AFC7

Contrast Matrix WCAG 2.1 Contrast

D9D6AF
D1B78E
ABA974
97AB8A
57877E
—
1.3
Fail
1.6
Fail
1.7
Fail
2.7
Fail
1.3
Fail
—
1.3
Fail
1.3
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
1.0
Fail
1.7
Fail
1.7
Fail
1.3
Fail
1.0
Fail
—
1.6
Fail
2.7
Fail
2.1
Fail
1.7
Fail
1.6
Fail
—
White BG
1.5Fail
1.9Fail
2.4Fail
2.5Fail
4.1AA Large
Black BG
14.2AAA
10.9AAA
8.7AAA
8.5AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D8B8
C6C698
AAAA81
A0A092
6C6C80

Deuteranopia

D8D8BB
C7C99A
AAAA84
9F9D94
696581

Tritanopia

D9C0C2
D0A0A1
AB8B8D
98989A
598282

Achromatopsia

D2D2D2
BABABA
A4A4A4
A1A1A1
787878

Shades & Tints Shades & Tints

#D9D6AF

Dark
Light

#D1B78E

Dark
Light

#ABA974

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9d6af;
  --color-2: #d1b78e;
  --color-3: #aba974;
  --color-4: #97ab8a;
  --color-5: #57877e;
}

SCSS

$color-1: #d9d6af;
$color-2: #d1b78e;
$color-3: #aba974;
$color-4: #97ab8a;
$color-5: #57877e;

TAILWIND

colors: {
  'brand-1': '#d9d6af',
  'brand-2': '#d1b78e',
  'brand-3': '#aba974',
  'brand-4': '#97ab8a',
  'brand-5': '#57877e',
}

RGB Array

[217, 214, 175], [209, 183, 142], [171, 169, 116], [151, 171, 138], [87, 135, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9D6AF, #D1B78E, #ABA974, #97AB8A, #57877E is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d9d6af; --color-2: #d1b78e; --color-3: #aba974; --color-4: #97ab8a; --color-5: #57877e. 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. Restrained colors convey professionalism and trust. 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