← Back to Editor

#B86B73 · #776C7A · #065B74 · #170B38 · #7A6969

skin

A 5-color skin 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

#B86B73

Crimson · Gray · Passion Red

HEX
#B86B73
RGB
rgb(184, 107, 115)
HSL
hsl(354, 35%, 57%)
HSB
hsb(354, 42%, 72%)
CMYK
cmyk(0%, 42%, 38%, 28%)
Oklch
oklch(61.5% 0.098 13.7)

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

#776C7A

Ink Gray · DimGray · Warm Gray

HEX
#776C7A
RGB
rgb(119, 108, 122)
HSL
hsl(287, 6%, 45%)
HSB
hsb(287, 11%, 48%)
CMYK
cmyk(2%, 11%, 0%, 52%)
Oklch
oklch(54.6% 0.025 319.0)

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

#065B74

Lake Blue · Teal · Peacock Green

HEX
#065B74
RGB
rgb(6, 91, 116)
HSL
hsl(194, 90%, 24%)
HSB
hsb(194, 95%, 45%)
CMYK
cmyk(95%, 22%, 0%, 55%)
Oklch
oklch(43.9% 0.081 225.3)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#170B38

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#170B38
RGB
rgb(23, 11, 56)
HSL
hsl(256, 67%, 13%)
HSB
hsb(256, 80%, 22%)
CMYK
cmyk(59%, 80%, 0%, 78%)
Oklch
oklch(20.1% 0.082 289.0)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#7A6969

Ink Gray · DimGray · Warm Gray

HEX
#7A6969
RGB
rgb(122, 105, 105)
HSL
hsl(0, 7%, 45%)
HSB
hsb(0, 14%, 48%)
CMYK
cmyk(0%, 14%, 14%, 52%)
Oklch
oklch(53.7% 0.022 17.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B86B73
6BB8B0

Analogous

B86B99
B86B73
B88A6B

Triadic

B86B73
73B86B
6B73B8

Split-Comp.

B86B73
6BB88A
6B99B8

Tetradic

B86B73
99B86B
6BB8B0
8A6BB8

Contrast Matrix WCAG 2.1 Contrast

B86B73
776C7A
065B74
170B38
7A6969
—
1.3
Fail
2.0
Fail
4.7
AA
1.3
Fail
1.3
Fail
—
1.5
Fail
3.7
AA Large
1.0
Fail
2.0
Fail
1.5
Fail
—
2.4
Fail
1.5
Fail
4.7
AA
3.7
AA Large
2.4
Fail
—
3.6
AA Large
1.3
Fail
1.0
Fail
1.5
Fail
3.6
AA Large
—
White BG
3.9AA Large
5.0AA
7.6AAA
18.4AAA
5.2AA
Black BG
5.4AA
4.2AA Large
2.8Fail
1.1Fail
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

979671
727277
2B2C6E
12122D
737269

Deuteranopia

9BA171
737476
26206C
13132A
747569

Tritanopia

B4706F
767473
0A6968
162523
796969

Achromatopsia

838383
717171
444444
141414
6E6E6E

Shades & Tints Shades & Tints

#B86B73

Dark
Light

#776C7A

Dark
Light

#065B74

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b86b73;
  --color-2: #776c7a;
  --color-3: #065b74;
  --color-4: #170b38;
  --color-5: #7a6969;
}

SCSS

$color-1: #b86b73;
$color-2: #776c7a;
$color-3: #065b74;
$color-4: #170b38;
$color-5: #7a6969;

TAILWIND

colors: {
  'brand-1': '#b86b73',
  'brand-2': '#776c7a',
  'brand-3': '#065b74',
  'brand-4': '#170b38',
  'brand-5': '#7a6969',
}

RGB Array

[184, 107, 115], [119, 108, 122], [6, 91, 116], [23, 11, 56], [122, 105, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This skin-style palette of #B86B73, #776C7A, #065B74, #170B38, #7A6969 is ideal for: tech websites, dark mode UIs, game UIs, 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: #b86b73; --color-2: #776c7a; --color-3: #065b74; --color-4: #170b38; --color-5: #7a6969. 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. 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 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