#87847C + #665D57 + #40262E + #450016 + #5E001E · skin - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#87847C

Ash · Gray · Warm Gray

HEX

#87847C

RGB

rgb(135, 132, 124)

HSL

hsl(44, 4%, 51%)

HSB

hsb(44, 8%, 53%)

CMYK

cmyk(0%, 2%, 8%, 47%)

Oklch

oklch(61.4% 0.012 89.8)

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

#665D57

Tangerine · DimGray · Charcoal

HEX

#665D57

RGB

rgb(102, 93, 87)

HSL

hsl(24, 8%, 37%)

HSB

hsb(24, 15%, 40%)

CMYK

cmyk(0%, 9%, 15%, 60%)

Oklch

oklch(48.5% 0.015 56.0)

Traditional「Tangerine」· Paint「Charcoal」· Creative Midnight Shadow

#40262E

Dark Violet · DarkSlateGray · Raspberry

HEX

#40262E

RGB

rgb(64, 38, 46)

HSL

hsl(342, 25%, 20%)

HSB

hsb(342, 41%, 25%)

CMYK

cmyk(0%, 41%, 28%, 75%)

Oklch

oklch(30.4% 0.041 359.9)

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

#450016

Dark Violet · Maroon · Raspberry

HEX

#450016

RGB

rgb(69, 0, 22)

HSL

hsl(341, 100%, 14%)

HSB

hsb(341, 100%, 27%)

CMYK

cmyk(0%, 100%, 68%, 73%)

Oklch

oklch(24.9% 0.100 10.3)

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

#5E001E

Dark Violet · Maroon · Raspberry

HEX

#5E001E

RGB

rgb(94, 0, 30)

HSL

hsl(341, 100%, 18%)

HSB

hsb(341, 100%, 37%)

CMYK

cmyk(0%, 100%, 68%, 63%)

Oklch

oklch(30.7% 0.123 12.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87847C

7D8087

Analogous

877F7D

87847C

85877D

Triadic

87847C

7D8784

847D87

Split-Comp.

87847C

7D8587

7F7D87

Tetradic

87847C

7D877F

7D8087

877D85

Contrast Matrix WCAG 2.1 Contrast

87847C	665D57	40262E	450016	5E001E
—	1.7 Fail	3.7 AA Large	4.4 AA Large	3.8 AA Large
1.7 Fail	—	2.1 Fail	2.6 Fail	2.2 Fail
3.7 AA Large	2.1 Fail	—	1.2 Fail	1.0 Fail
4.4 AA Large	2.6 Fail	1.2 Fail	—	1.2 Fail
3.8 AA Large	2.2 Fail	1.0 Fail	1.2 Fail	—

White BG

3.7AA Large

6.4AA

13.7AAA

16.6AAA

14.0AAA

Black BG

5.6AA

3.3AA Large

1.5Fail

1.3Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

86867E

626258

35352C

272711

353417

Deuteranopia

86867E

636359

36382C

2B300F

3B4215

Tritanopia

877F80

665A5A

3F2B2A

420C0C

591110

Achromatopsia

848484

5F5F5F

2F2F2F

171717

202020

Shades & Tints Shades & Tints

#87847C

Dark

Light

#665D57

Dark

Light

#40262E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87847c;
  --color-2: #665d57;
  --color-3: #40262e;
  --color-4: #450016;
  --color-5: #5e001e;
}

SCSS

$color-1: #87847c;
$color-2: #665d57;
$color-3: #40262e;
$color-4: #450016;
$color-5: #5e001e;

TAILWIND

colors: {
  'brand-1': '#87847c',
  'brand-2': '#665d57',
  'brand-3': '#40262e',
  'brand-4': '#450016',
  'brand-5': '#5e001e',
}

RGB Array

[135, 132, 124], [102, 93, 87], [64, 38, 46], [69, 0, 22], [94, 0, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This skin-style palette of #87847C, #665D57, #40262E, #450016, #5E001E is ideal for: tech websites, dark mode UIs, game UIs. 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: #87847c; --color-2: #665d57; --color-3: #40262e; --color-4: #450016; --color-5: #5e001e. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 skin-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