← Back to Editor

#87755D · #D1AA7F · #C55784 · #784C59 · #4E163B

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

Color Details Color Details

#87755D

Ochre · DimGray · Amber Brown

HEX
#87755D
RGB
rgb(135, 117, 93)
HSL
hsl(34, 18%, 45%)
HSB
hsb(34, 31%, 53%)
CMYK
cmyk(0%, 13%, 31%, 47%)
Oklch
oklch(57.3% 0.042 74.8)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#D1AA7F

Ginger · Tan · Warm Sun

HEX
#D1AA7F
RGB
rgb(209, 170, 127)
HSL
hsl(31, 47%, 66%)
HSB
hsb(31, 39%, 82%)
CMYK
cmyk(0%, 19%, 39%, 18%)
Oklch
oklch(76.3% 0.073 69.1)

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

#C55784

Dark Violet · LightCoral · Rose Pink

HEX
#C55784
RGB
rgb(197, 87, 132)
HSL
hsl(335, 49%, 56%)
HSB
hsb(335, 56%, 77%)
CMYK
cmyk(0%, 56%, 33%, 23%)
Oklch
oklch(60.8% 0.148 356.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#784C59

Dark Violet · DimGray · Camellia

HEX
#784C59
RGB
rgb(120, 76, 89)
HSL
hsl(342, 22%, 38%)
HSB
hsb(342, 37%, 47%)
CMYK
cmyk(0%, 37%, 26%, 53%)
Oklch
oklch(47.0% 0.062 0.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#4E163B

Rose Purple · DarkSlateGray · Raspberry

HEX
#4E163B
RGB
rgb(78, 22, 59)
HSL
hsl(320, 56%, 20%)
HSB
hsb(320, 72%, 31%)
CMYK
cmyk(0%, 72%, 24%, 69%)
Oklch
oklch(30.5% 0.096 343.7)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87755D
5E7087

Analogous

87615E
87755D
85875E

Triadic

87755D
5E8776
765E87

Split-Comp.

87755D
5E8587
615E87

Tetradic

87755D
5E8761
5E7087
875E85

Contrast Matrix WCAG 2.1 Contrast

87755D
D1AA7F
C55784
784C59
4E163B
—
2.1
Fail
1.1
Fail
1.6
Fail
3.2
AA Large
2.1
Fail
—
1.9
Fail
3.3
AA Large
6.5
AA
1.1
Fail
1.9
Fail
—
1.7
Fail
3.4
AA Large
1.6
Fail
3.3
AA Large
1.7
Fail
—
2.0
Fail
3.2
AA Large
6.5
AA
3.4
AA Large
2.0
Fail
—
White BG
4.4AA Large
2.2Fail
4.1AA Large
7.1AAA
14.0AAA
Black BG
4.7AA
9.8AAA
5.1AA
3.0Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F7F63
C0C089
959479
656556
363532

Deuteranopia

808264
C2C58C
9CA476
686B55
393D30

Tritanopia

866768
CF9293
BF716F
765353
4B2B29

Achromatopsia

787878
B1B1B1
7D7D7D
5B5B5B
2B2B2B

Shades & Tints Shades & Tints

#87755D

Dark
Light

#D1AA7F

Dark
Light

#C55784

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87755d;
  --color-2: #d1aa7f;
  --color-3: #c55784;
  --color-4: #784c59;
  --color-5: #4e163b;
}

SCSS

$color-1: #87755d;
$color-2: #d1aa7f;
$color-3: #c55784;
$color-4: #784c59;
$color-5: #4e163b;

TAILWIND

colors: {
  'brand-1': '#87755d',
  'brand-2': '#d1aa7f',
  'brand-3': '#c55784',
  'brand-4': '#784c59',
  'brand-5': '#4e163b',
}

RGB Array

[135, 117, 93], [209, 170, 127], [197, 87, 132], [120, 76, 89], [78, 22, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87755D, #D1AA7F, #C55784, #784C59, #4E163B is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #87755d; --color-2: #d1aa7f; --color-3: #c55784; --color-4: #784c59; --color-5: #4e163b. 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. 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