← Back to Editor

#D1CDAB · #2D2D2E · #87825B · #787650 · #8CA257

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 LibraryData Visualization

Color Details Color Details

#D1CDAB

Fresh Green · Silver · Sunflower

HEX
#D1CDAB
RGB
rgb(209, 205, 171)
HSL
hsl(54, 29%, 75%)
HSB
hsb(54, 18%, 82%)
CMYK
cmyk(0%, 2%, 18%, 18%)
Oklch
oklch(84.3% 0.046 101.8)

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

#2D2D2E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2D2D2E
RGB
rgb(45, 45, 46)
HSL
hsl(240, 1%, 18%)
HSB
hsb(240, 2%, 18%)
CMYK
cmyk(2%, 2%, 0%, 82%)
Oklch
oklch(29.8% 0.002 286.3)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#87825B

Autumn Sage · Gray · Honey Gold

HEX
#87825B
RGB
rgb(135, 130, 91)
HSL
hsl(53, 19%, 44%)
HSB
hsb(53, 33%, 53%)
CMYK
cmyk(0%, 4%, 33%, 47%)
Oklch
oklch(60.1% 0.056 101.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#787650

Autumn Sage · DimGray · Honey Gold

HEX
#787650
RGB
rgb(120, 118, 80)
HSL
hsl(57, 20%, 39%)
HSB
hsb(57, 33%, 47%)
CMYK
cmyk(0%, 2%, 33%, 53%)
Oklch
oklch(55.8% 0.055 105.5)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#8CA257

Grass Green · Gray · Olive Green

HEX
#8CA257
RGB
rgb(140, 162, 87)
HSL
hsl(78, 30%, 49%)
HSB
hsb(78, 46%, 64%)
CMYK
cmyk(14%, 0%, 46%, 36%)
Oklch
oklch(67.8% 0.104 122.6)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1CDAB
ADB0D2

Analogous

D2BCAD
D1CDAB
C3D2AD

Triadic

D1CDAB
ADD2CE
CEADD2

Split-Comp.

D1CDAB
ADC3D2
BCADD2

Tetradic

D1CDAB
ADD2BC
ADB0D2
D2ADC3

Contrast Matrix WCAG 2.1 Contrast

D1CDAB
2D2D2E
87825B
787650
8CA257
—
8.5
AAA
2.4
Fail
2.9
Fail
1.8
Fail
8.5
AAA
—
3.5
AA Large
3.0
Fail
4.9
AA
2.4
Fail
3.5
AA Large
—
1.2
Fail
1.4
Fail
2.9
Fail
3.0
Fail
1.2
Fail
—
1.6
Fail
1.8
Fail
4.9
AA
1.4
Fail
1.6
Fail
—
White BG
1.6Fail
13.8AAA
3.9AA Large
4.7AA
2.8Fail
Black BG
13.0AAA
1.5Fail
5.4AA
4.5AA
7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCFB3
2D2D2E
858564
777759
969669

Deuteranopia

D0D0B5
2D2D2E
858667
77775B
94936E

Tritanopia

D1BABB
2D2E2E
876C6E
786062
8D777B

Achromatopsia

CACACA
2D2D2D
7F7F7F
727272
939393

Shades & Tints Shades & Tints

#D1CDAB

Dark
Light

#2D2D2E

Dark
Light

#87825B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1cdab;
  --color-2: #2d2d2e;
  --color-3: #87825b;
  --color-4: #787650;
  --color-5: #8ca257;
}

SCSS

$color-1: #d1cdab;
$color-2: #2d2d2e;
$color-3: #87825b;
$color-4: #787650;
$color-5: #8ca257;

TAILWIND

colors: {
  'brand-1': '#d1cdab',
  'brand-2': '#2d2d2e',
  'brand-3': '#87825b',
  'brand-4': '#787650',
  'brand-5': '#8ca257',
}

RGB Array

[209, 205, 171], [45, 45, 46], [135, 130, 91], [120, 118, 80], [140, 162, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1CDAB, #2D2D2E, #87825B, #787650, #8CA257 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #d1cdab; --color-2: #2d2d2e; --color-3: #87825b; --color-4: #787650; --color-5: #8ca257. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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