← Back to Editor

#B7A96A · #E8B15E · #F44C1D · #CA3A22 · #3F2725

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

#B7A96A

Ginger · Tan · Sunflower

HEX
#B7A96A
RGB
rgb(183, 169, 106)
HSL
hsl(49, 35%, 57%)
HSB
hsb(49, 42%, 72%)
CMYK
cmyk(0%, 8%, 42%, 28%)
Oklch
oklch(73.2% 0.084 97.2)

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

#E8B15E

Ginger · SandyBrown · Warm Sun

HEX
#E8B15E
RGB
rgb(232, 177, 94)
HSL
hsl(36, 75%, 64%)
HSB
hsb(36, 59%, 91%)
CMYK
cmyk(0%, 24%, 59%, 9%)
Oklch
oklch(79.5% 0.119 75.8)

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

#F44C1D

Vermilion · OrangeRed · Passion Red

HEX
#F44C1D
RGB
rgb(244, 76, 29)
HSL
hsl(13, 91%, 54%)
HSB
hsb(13, 88%, 96%)
CMYK
cmyk(0%, 69%, 88%, 4%)
Oklch
oklch(64.9% 0.212 35.2)

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

#CA3A22

Vermilion · FireBrick · Passion Red

HEX
#CA3A22
RGB
rgb(202, 58, 34)
HSL
hsl(9, 71%, 46%)
HSB
hsb(9, 83%, 79%)
CMYK
cmyk(0%, 71%, 83%, 21%)
Oklch
oklch(56.1% 0.185 32.1)

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

#3F2725

Crimson · DarkSlateGray · Deep Berry

HEX
#3F2725
RGB
rgb(63, 39, 37)
HSL
hsl(5, 26%, 20%)
HSB
hsb(5, 41%, 25%)
CMYK
cmyk(0%, 38%, 41%, 75%)
Oklch
oklch(30.2% 0.037 24.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7A96A
6B79B8

Analogous

B8836B
B7A96A
9FB86B

Triadic

B7A96A
6BB8AA
AA6BB8

Split-Comp.

B7A96A
6B9FB8
836BB8

Tetradic

B7A96A
6BB883
6B79B8
B86B9F

Contrast Matrix WCAG 2.1 Contrast

B7A96A
E8B15E
F44C1D
CA3A22
3F2725
—
1.2
Fail
1.5
Fail
2.1
Fail
5.8
AA
1.2
Fail
—
1.8
Fail
2.6
Fail
7.1
AAA
1.5
Fail
1.8
Fail
—
1.4
Fail
3.9
AA Large
2.1
Fail
2.6
Fail
1.4
Fail
—
2.7
Fail
5.8
AA
7.1
AAA
3.9
AA Large
2.7
Fail
—
White BG
2.4Fail
1.9Fail
3.6AA Large
5.1AA
13.7AAA
Black BG
8.9AAA
10.9AAA
5.9AA
4.1AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B179
D0D072
ABAA28
8C8A28
353425

Deuteranopia

B2B37D
D3D777
B5C22B
949F29
363826

Tritanopia

B68588
E58285
EC3133
C32C2D
3E2626

Achromatopsia

A6A6A6
B8B8B8
797979
626262
2E2E2E

Shades & Tints Shades & Tints

#B7A96A

Dark
Light

#E8B15E

Dark
Light

#F44C1D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7a96a;
  --color-2: #e8b15e;
  --color-3: #f44c1d;
  --color-4: #ca3a22;
  --color-5: #3f2725;
}

SCSS

$color-1: #b7a96a;
$color-2: #e8b15e;
$color-3: #f44c1d;
$color-4: #ca3a22;
$color-5: #3f2725;

TAILWIND

colors: {
  'brand-1': '#b7a96a',
  'brand-2': '#e8b15e',
  'brand-3': '#f44c1d',
  'brand-4': '#ca3a22',
  'brand-5': '#3f2725',
}

RGB Array

[183, 169, 106], [232, 177, 94], [244, 76, 29], [202, 58, 34], [63, 39, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7A96A, #E8B15E, #F44C1D, #CA3A22, #3F2725 is ideal for: 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: #b7a96a; --color-2: #e8b15e; --color-3: #f44c1d; --color-4: #ca3a22; --color-5: #3f2725. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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