← Back to Editor

#B43E0E · #69610E · #3E2B25 · #D8BB93 · #56A288

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

#B43E0E

Tangerine · FireBrick · Amber Brown

HEX
#B43E0E
RGB
rgb(180, 62, 14)
HSL
hsl(17, 86%, 38%)
HSB
hsb(17, 92%, 71%)
CMYK
cmyk(0%, 66%, 92%, 29%)
Oklch
oklch(52.6% 0.162 38.8)

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

#69610E

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#69610E
RGB
rgb(105, 97, 14)
HSL
hsl(55, 76%, 23%)
HSB
hsb(55, 87%, 41%)
CMYK
cmyk(0%, 8%, 87%, 59%)
Oklch
oklch(48.5% 0.097 103.5)

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

#3E2B25

Crimson · DarkSlateGray · Deep Berry

HEX
#3E2B25
RGB
rgb(62, 43, 37)
HSL
hsl(14, 25%, 19%)
HSB
hsb(14, 40%, 24%)
CMYK
cmyk(0%, 31%, 40%, 76%)
Oklch
oklch(31.0% 0.030 38.3)

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

#D8BB93

Goose Yellow · Tan · Warm Sun

HEX
#D8BB93
RGB
rgb(216, 187, 147)
HSL
hsl(35, 47%, 71%)
HSB
hsb(35, 32%, 85%)
CMYK
cmyk(0%, 13%, 32%, 15%)
Oklch
oklch(80.7% 0.063 75.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#56A288

Mineral Blue · CadetBlue · Olive Green

HEX
#56A288
RGB
rgb(86, 162, 136)
HSL
hsl(159, 31%, 49%)
HSB
hsb(159, 47%, 64%)
CMYK
cmyk(47%, 0%, 16%, 36%)
Oklch
oklch(65.6% 0.086 169.2)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B43E0E
0E85B4

Analogous

B40E32
B43E0E
B4900E

Triadic

B43E0E
0EB43D
3D0EB4

Split-Comp.

B43E0E
0EB490
0E32B4

Tetradic

B43E0E
32B40E
0E85B4
900EB4

Contrast Matrix WCAG 2.1 Contrast

B43E0E
69610E
3E2B25
D8BB93
56A288
—
1.1
Fail
2.3
Fail
3.1
AA Large
1.9
Fail
1.1
Fail
—
2.1
Fail
3.5
AA Large
2.1
Fail
2.3
Fail
2.1
Fail
—
7.3
AAA
4.4
AA Large
3.1
AA Large
3.5
AA Large
7.3
AAA
—
1.7
Fail
1.9
Fail
2.1
Fail
4.4
AA Large
1.7
Fail
—
White BG
5.8AA
6.3AA
13.3AAA
1.8Fail
3.0AA Large
Black BG
3.6AA Large
3.3AA Large
1.6Fail
11.4AAA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

81801A
666522
363626
CBCB9D
77788E

Deuteranopia

88911C
666727
373827
CDCF9F
736D90

Tritanopia

AE2325
693235
3D2828
D7A4A6
5A9394

Achromatopsia

5C5C5C
5A5A5A
303030
BFBFBF
888888

Shades & Tints Shades & Tints

#B43E0E

Dark
Light

#69610E

Dark
Light

#3E2B25

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b43e0e;
  --color-2: #69610e;
  --color-3: #3e2b25;
  --color-4: #d8bb93;
  --color-5: #56a288;
}

SCSS

$color-1: #b43e0e;
$color-2: #69610e;
$color-3: #3e2b25;
$color-4: #d8bb93;
$color-5: #56a288;

TAILWIND

colors: {
  'brand-1': '#b43e0e',
  'brand-2': '#69610e',
  'brand-3': '#3e2b25',
  'brand-4': '#d8bb93',
  'brand-5': '#56a288',
}

RGB Array

[180, 62, 14], [105, 97, 14], [62, 43, 37], [216, 187, 147], [86, 162, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B43E0E, #69610E, #3E2B25, #D8BB93, #56A288 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: #b43e0e; --color-2: #69610e; --color-3: #3e2b25; --color-4: #d8bb93; --color-5: #56a288. 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