← Back to Editor

#B0A68D · #B7942E · #31565F · #211B1D · #422134

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

#B0A68D

Ginger · DarkGray · Sunflower

HEX
#B0A68D
RGB
rgb(176, 166, 141)
HSL
hsl(43, 18%, 62%)
HSB
hsb(43, 20%, 69%)
CMYK
cmyk(0%, 6%, 20%, 31%)
Oklch
oklch(72.7% 0.037 88.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#B7942E

Ochre · DarkGoldenRod · Honey Gold

HEX
#B7942E
RGB
rgb(183, 148, 46)
HSL
hsl(45, 60%, 45%)
HSB
hsb(45, 75%, 72%)
CMYK
cmyk(0%, 19%, 75%, 28%)
Oklch
oklch(68.1% 0.123 89.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#31565F

Slate Blue · DarkSlateGray · Mint Ice

HEX
#31565F
RGB
rgb(49, 86, 95)
HSL
hsl(192, 32%, 28%)
HSB
hsb(192, 48%, 37%)
CMYK
cmyk(48%, 9%, 0%, 63%)
Oklch
oklch(42.9% 0.045 215.1)

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

#211B1D

Dark Violet · Black · Raspberry

HEX
#211B1D
RGB
rgb(33, 27, 29)
HSL
hsl(340, 10%, 12%)
HSB
hsb(340, 18%, 13%)
CMYK
cmyk(0%, 18%, 12%, 87%)
Oklch
oklch(23.0% 0.010 355.8)

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

#422134

Rose Purple · DarkSlateGray · Raspberry

HEX
#422134
RGB
rgb(66, 33, 52)
HSL
hsl(325, 33%, 19%)
HSB
hsb(325, 50%, 26%)
CMYK
cmyk(0%, 50%, 21%, 74%)
Oklch
oklch(30.0% 0.058 345.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0A68D
8D97B0

Analogous

B0948D
B0A68D
A8B08D

Triadic

B0A68D
8DB0A6
A68DB0

Split-Comp.

B0A68D
8DA8B0
948DB0

Tetradic

B0A68D
8DB094
8D97B0
B08DA8

Contrast Matrix WCAG 2.1 Contrast

B0A68D
B7942E
31565F
211B1D
422134
—
1.2
Fail
3.3
AA Large
7.0
AAA
5.8
AA
1.2
Fail
—
2.8
Fail
5.9
AA
4.9
AA
3.3
AA Large
2.8
Fail
—
2.1
Fail
1.8
Fail
7.0
AAA
5.9
AA
2.1
Fail
—
1.2
Fail
5.8
AA
4.9
AA
1.8
Fail
1.2
Fail
—
White BG
2.4Fail
2.9Fail
8.0AAA
16.9AAA
14.0AAA
Black BG
8.7AAA
7.3AAA
2.6Fail
1.2Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAC93
A8A847
41415D
1E1E1D
34332F

Deuteranopia

ACAD95
AAAD4D
3F3C5C
1F1F1C
36382E

Tritanopia

B09899
B55A5E
335B5B
211C1C
402C2B

Achromatopsia

A6A6A6
939393
4C4C4C
1D1D1D
2D2D2D

Shades & Tints Shades & Tints

#B0A68D

Dark
Light

#B7942E

Dark
Light

#31565F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0a68d;
  --color-2: #b7942e;
  --color-3: #31565f;
  --color-4: #211b1d;
  --color-5: #422134;
}

SCSS

$color-1: #b0a68d;
$color-2: #b7942e;
$color-3: #31565f;
$color-4: #211b1d;
$color-5: #422134;

TAILWIND

colors: {
  'brand-1': '#b0a68d',
  'brand-2': '#b7942e',
  'brand-3': '#31565f',
  'brand-4': '#211b1d',
  'brand-5': '#422134',
}

RGB Array

[176, 166, 141], [183, 148, 46], [49, 86, 95], [33, 27, 29], [66, 33, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0A68D, #B7942E, #31565F, #211B1D, #422134 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: #b0a68d; --color-2: #b7942e; --color-3: #31565f; --color-4: #211b1d; --color-5: #422134. 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 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