← Back to Editor

#B2A187 · #795A45 · #120306 · #404B5F · #41868B

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

#B2A187

Ginger · DarkGray · Warm Sun

HEX
#B2A187
RGB
rgb(178, 161, 135)
HSL
hsl(36, 22%, 61%)
HSB
hsb(36, 24%, 70%)
CMYK
cmyk(0%, 10%, 24%, 30%)
Oklch
oklch(71.7% 0.041 78.4)

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

#795A45

Tangerine · DimGray · Amber Brown

HEX
#795A45
RGB
rgb(121, 90, 69)
HSL
hsl(24, 27%, 37%)
HSB
hsb(24, 43%, 47%)
CMYK
cmyk(0%, 26%, 43%, 53%)
Oklch
oklch(49.4% 0.052 55.3)

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

#120306

Vermilion · Black · Deep Berry

HEX
#120306
RGB
rgb(18, 3, 6)
HSL
hsl(348, 71%, 4%)
HSB
hsb(348, 83%, 7%)
CMYK
cmyk(0%, 83%, 67%, 93%)
Oklch
oklch(13.2% 0.033 5.4)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#404B5F

Indigo · DarkSlateGray · Prussian Blue

HEX
#404B5F
RGB
rgb(64, 75, 95)
HSL
hsl(219, 19%, 31%)
HSB
hsb(219, 33%, 37%)
CMYK
cmyk(33%, 21%, 0%, 63%)
Oklch
oklch(41.1% 0.037 262.3)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#41868B

Slate Blue · SteelBlue · Mint Ice

HEX
#41868B
RGB
rgb(65, 134, 139)
HSL
hsl(184, 36%, 40%)
HSB
hsb(184, 53%, 55%)
CMYK
cmyk(53%, 4%, 0%, 45%)
Oklch
oklch(57.7% 0.070 201.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2A187
8697B1

Analogous

B18A86
B2A187
ADB186

Triadic

B2A187
86B1A0
A086B1

Split-Comp.

B2A187
86ADB1
8A86B1

Tetradic

B2A187
86B18A
8697B1
B186AD

Contrast Matrix WCAG 2.1 Contrast

B2A187
795A45
120306
404B5F
41868B
—
2.5
Fail
8.0
AAA
3.5
AA Large
1.7
Fail
2.5
Fail
—
3.2
AA Large
1.4
Fail
1.5
Fail
8.0
AAA
3.2
AA Large
—
2.3
Fail
4.8
AA
3.5
AA Large
1.4
Fail
2.3
Fail
—
2.1
Fail
1.7
Fail
1.5
Fail
4.8
AA
2.1
Fail
—
White BG
2.5Fail
6.2AA
20.2AAA
8.8AAA
4.2AA Large
Black BG
8.3AAA
3.4AA Large
1.0Fail
2.4Fail
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABAA8D
6C6B4A
0C0B05
45455A
5F5F8A

Deuteranopia

ACAD8F
6D704B
0C0E05
444359
5B568A

Tritanopia

B19293
774E4F
110505
415656
448989

Achromatopsia

A3A3A3
616161
080808
4A4A4A
727272

Shades & Tints Shades & Tints

#B2A187

Dark
Light

#795A45

Dark
Light

#120306

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2a187;
  --color-2: #795a45;
  --color-3: #120306;
  --color-4: #404b5f;
  --color-5: #41868b;
}

SCSS

$color-1: #b2a187;
$color-2: #795a45;
$color-3: #120306;
$color-4: #404b5f;
$color-5: #41868b;

TAILWIND

colors: {
  'brand-1': '#b2a187',
  'brand-2': '#795a45',
  'brand-3': '#120306',
  'brand-4': '#404b5f',
  'brand-5': '#41868b',
}

RGB Array

[178, 161, 135], [121, 90, 69], [18, 3, 6], [64, 75, 95], [65, 134, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2A187, #795A45, #120306, #404B5F, #41868B 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: #b2a187; --color-2: #795a45; --color-3: #120306; --color-4: #404b5f; --color-5: #41868b. 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