← Back to Editor

#83877F · #D3CBB8 · #D1B182 · #D97E6C · #C15759

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

#83877F

Ash · Gray · Warm Gray

HEX
#83877F
RGB
rgb(131, 135, 127)
HSL
hsl(90, 3%, 51%)
HSB
hsb(90, 6%, 53%)
CMYK
cmyk(3%, 0%, 6%, 47%)
Oklch
oklch(61.8% 0.013 128.7)

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

#D3CBB8

Goose Yellow · Silver · Lemon Cream

HEX
#D3CBB8
RGB
rgb(211, 203, 184)
HSL
hsl(42, 23%, 77%)
HSB
hsb(42, 13%, 83%)
CMYK
cmyk(0%, 4%, 13%, 17%)
Oklch
oklch(84.3% 0.027 87.9)

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

#D1B182

Ginger · Tan · Warm Sun

HEX
#D1B182
RGB
rgb(209, 177, 130)
HSL
hsl(36, 46%, 66%)
HSB
hsb(36, 38%, 82%)
CMYK
cmyk(0%, 15%, 38%, 18%)
Oklch
oklch(77.7% 0.073 76.9)

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

#D97E6C

Peach Pink · LightCoral · Coral Red

HEX
#D97E6C
RGB
rgb(217, 126, 108)
HSL
hsl(10, 59%, 64%)
HSB
hsb(10, 50%, 85%)
CMYK
cmyk(0%, 42%, 50%, 15%)
Oklch
oklch(68.8% 0.117 32.1)

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

#C15759

Crimson · Sienna · Passion Red

HEX
#C15759
RGB
rgb(193, 87, 89)
HSL
hsl(359, 46%, 55%)
HSB
hsb(359, 55%, 76%)
CMYK
cmyk(0%, 55%, 54%, 24%)
Oklch
oklch(59.0% 0.137 21.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

83877F
827E86

Analogous

86867E
83877F
7E867E

Triadic

83877F
7E8286
867E82

Split-Comp.

83877F
7E7E86
867E86

Tetradic

83877F
7E8686
827E86
867E7E

Contrast Matrix WCAG 2.1 Contrast

83877F
D3CBB8
D1B182
D97E6C
C15759
—
2.3
Fail
1.8
Fail
1.2
Fail
1.2
Fail
2.3
Fail
—
1.3
Fail
1.8
Fail
2.7
Fail
1.8
Fail
1.3
Fail
—
1.4
Fail
2.2
Fail
1.2
Fail
1.8
Fail
1.4
Fail
—
1.5
Fail
1.2
Fail
2.7
Fail
2.2
Fail
1.5
Fail
—
White BG
3.7AA Large
1.6Fail
2.0Fail
2.9Fail
4.4AA Large
Black BG
5.7AA
13.0AAA
10.3AAA
7.2AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

858581
D0CFBD
C3C38D
B2B170
939259

Deuteranopia

858481
D0D1BE
C5C790
B7BE71
99A158

Tritanopia

838283
D3C0C1
CF9698
D47475
BC5858

Achromatopsia

858585
CBCBCB
B5B5B5
979797
777777

Shades & Tints Shades & Tints

#83877F

Dark
Light

#D3CBB8

Dark
Light

#D1B182

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #83877f;
  --color-2: #d3cbb8;
  --color-3: #d1b182;
  --color-4: #d97e6c;
  --color-5: #c15759;
}

SCSS

$color-1: #83877f;
$color-2: #d3cbb8;
$color-3: #d1b182;
$color-4: #d97e6c;
$color-5: #c15759;

TAILWIND

colors: {
  'brand-1': '#83877f',
  'brand-2': '#d3cbb8',
  'brand-3': '#d1b182',
  'brand-4': '#d97e6c',
  'brand-5': '#c15759',
}

RGB Array

[131, 135, 127], [211, 203, 184], [209, 177, 130], [217, 126, 108], [193, 87, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #83877F, #D3CBB8, #D1B182, #D97E6C, #C15759 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: #83877f; --color-2: #d3cbb8; --color-3: #d1b182; --color-4: #d97e6c; --color-5: #c15759. 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