← Back to Editor

#B8A364 · #BA7951 · #292116 · #64622F · #648278

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

#B8A364

Ginger · Tan · Sunflower

HEX
#B8A364
RGB
rgb(184, 163, 100)
HSL
hsl(45, 37%, 56%)
HSB
hsb(45, 46%, 72%)
CMYK
cmyk(0%, 11%, 46%, 28%)
Oklch
oklch(72.0% 0.086 91.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#BA7951

Tangerine · Chocolate · Warm Sun

HEX
#BA7951
RGB
rgb(186, 121, 81)
HSL
hsl(23, 43%, 52%)
HSB
hsb(23, 56%, 73%)
CMYK
cmyk(0%, 35%, 56%, 27%)
Oklch
oklch(63.5% 0.098 51.8)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#292116

Ochre · Black · Cinnamon

HEX
#292116
RGB
rgb(41, 33, 22)
HSL
hsl(35, 30%, 12%)
HSB
hsb(35, 46%, 16%)
CMYK
cmyk(0%, 20%, 46%, 84%)
Oklch
oklch(25.4% 0.023 75.3)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#64622F

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#64622F
RGB
rgb(100, 98, 47)
HSL
hsl(58, 36%, 29%)
HSB
hsb(58, 53%, 39%)
CMYK
cmyk(0%, 2%, 53%, 61%)
Oklch
oklch(48.6% 0.072 106.8)

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

#648278

Mineral Blue · SlateGray · Mint Ice

HEX
#648278
RGB
rgb(100, 130, 120)
HSL
hsl(160, 13%, 45%)
HSB
hsb(160, 23%, 51%)
CMYK
cmyk(23%, 0%, 8%, 49%)
Oklch
oklch(58.0% 0.038 172.5)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8A364
657AB8

Analogous

B87A65
B8A364
A4B865

Triadic

B8A364
65B8A4
A465B8

Split-Comp.

B8A364
65A4B8
7A65B8

Tetradic

B8A364
65B87A
657AB8
B865A4

Contrast Matrix WCAG 2.1 Contrast

B8A364
BA7951
292116
64622F
648278
—
1.4
Fail
6.4
AA
2.5
Fail
1.7
Fail
1.4
Fail
—
4.5
AA Large
1.8
Fail
1.2
Fail
6.4
AA
4.5
AA Large
—
2.5
Fail
3.8
AA Large
2.5
Fail
1.8
Fail
2.5
Fail
—
1.5
Fail
1.7
Fail
1.2
Fail
3.8
AA Large
1.5
Fail
—
White BG
2.5Fail
3.5AA Large
15.9AAA
6.3AA
4.2AA Large
Black BG
8.5AAA
5.9AA
1.3Fail
3.3AA Large
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAF73
9E9D5B
262519
63633B
71717A

Deuteranopia

B0B277
A2A75D
262719
63633E
6F6D7B

Tritanopia

B77F82
B76264
291B1B
644547
667C7D

Achromatopsia

A2A2A2
888888
222222
5D5D5D
787878

Shades & Tints Shades & Tints

#B8A364

Dark
Light

#BA7951

Dark
Light

#292116

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8a364;
  --color-2: #ba7951;
  --color-3: #292116;
  --color-4: #64622f;
  --color-5: #648278;
}

SCSS

$color-1: #b8a364;
$color-2: #ba7951;
$color-3: #292116;
$color-4: #64622f;
$color-5: #648278;

TAILWIND

colors: {
  'brand-1': '#b8a364',
  'brand-2': '#ba7951',
  'brand-3': '#292116',
  'brand-4': '#64622f',
  'brand-5': '#648278',
}

RGB Array

[184, 163, 100], [186, 121, 81], [41, 33, 22], [100, 98, 47], [100, 130, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This skin-style palette of #B8A364, #BA7951, #292116, #64622F, #648278 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: #b8a364; --color-2: #ba7951; --color-3: #292116; --color-4: #64622f; --color-5: #648278. 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