← Back to Editor

#B4A689 · #7F7157 · #5E4938 · #1D1F1E · #030200

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#B4A689

Ginger · Tan · Sunflower

HEX
#B4A689
RGB
rgb(180, 166, 137)
HSL
hsl(40, 22%, 62%)
HSB
hsb(40, 24%, 71%)
CMYK
cmyk(0%, 8%, 24%, 29%)
Oklch
oklch(72.9% 0.043 85.2)

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

#7F7157

Ochre · DimGray · Amber Brown

HEX
#7F7157
RGB
rgb(127, 113, 87)
HSL
hsl(39, 19%, 42%)
HSB
hsb(39, 31%, 50%)
CMYK
cmyk(0%, 11%, 31%, 50%)
Oklch
oklch(55.5% 0.042 82.8)

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

#5E4938

Tangerine · DarkOliveGreen · Amber Brown

HEX
#5E4938
RGB
rgb(94, 73, 56)
HSL
hsl(27, 25%, 29%)
HSB
hsb(27, 40%, 37%)
CMYK
cmyk(0%, 22%, 40%, 63%)
Oklch
oklch(42.3% 0.039 60.4)

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

#1D1F1E

Ink Black · Black · Dark Stone

HEX
#1D1F1E
RGB
rgb(29, 31, 30)
HSL
hsl(150, 3%, 12%)
HSB
hsb(150, 6%, 12%)
CMYK
cmyk(6%, 0%, 3%, 88%)
Oklch
oklch(23.7% 0.004 164.7)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

#030200

Ochre · Black · Amber Gold

HEX
#030200
RGB
rgb(3, 2, 0)
HSL
hsl(40, 100%, 1%)
HSB
hsb(40, 100%, 1%)
CMYK
cmyk(0%, 33%, 100%, 99%)
Oklch
oklch(8.6% 0.018 94.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4A689
8997B3

Analogous

B39089
B4A689
ACB389

Triadic

B4A689
89B3A5
A589B3

Split-Comp.

B4A689
89ACB3
9089B3

Tetradic

B4A689
89B390
8997B3
B389AC

Contrast Matrix WCAG 2.1 Contrast

B4A689
7F7157
5E4938
1D1F1E
030200
—
2.0
Fail
3.5
AA Large
6.9
AA
8.6
AAA
2.0
Fail
—
1.8
Fail
3.5
AA Large
4.3
AA Large
3.5
AA Large
1.8
Fail
—
2.0
Fail
2.5
Fail
6.9
AA
3.5
AA Large
2.0
Fail
—
1.3
Fail
8.6
AAA
4.3
AA Large
2.5
Fail
1.3
Fail
—
White BG
2.4Fail
4.8AA
8.4AAA
16.6AAA
20.7AAA
Black BG
8.8AAA
4.4AA Large
2.5Fail
1.3Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAE90
79795D
55553C
1E1E1E
030300

Deuteranopia

AFB092
7A7B5F
56583D
1E1E1E
030301

Tritanopia

B39697
7E6263
5D3F40
1D1E1E
030101

Achromatopsia

A7A7A7
727272
4D4D4D
1E1E1E
020202

Shades & Tints Shades & Tints

#B4A689

Dark
Light

#7F7157

Dark
Light

#5E4938

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4a689;
  --color-2: #7f7157;
  --color-3: #5e4938;
  --color-4: #1d1f1e;
  --color-5: #030200;
}

SCSS

$color-1: #b4a689;
$color-2: #7f7157;
$color-3: #5e4938;
$color-4: #1d1f1e;
$color-5: #030200;

TAILWIND

colors: {
  'brand-1': '#b4a689',
  'brand-2': '#7f7157',
  'brand-3': '#5e4938',
  'brand-4': '#1d1f1e',
  'brand-5': '#030200',
}

RGB Array

[180, 166, 137], [127, 113, 87], [94, 73, 56], [29, 31, 30], [3, 2, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4A689, #7F7157, #5E4938, #1D1F1E, #030200 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: #b4a689; --color-2: #7f7157; --color-3: #5e4938; --color-4: #1d1f1e; --color-5: #030200. 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