← Back to Editor

#3E1A0E · #413121 · #878B66 · #B7A371 · #C25F59

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

#3E1A0E

Tangerine · Black · Cinnamon

HEX
#3E1A0E
RGB
rgb(62, 26, 14)
HSL
hsl(15, 63%, 15%)
HSB
hsb(15, 77%, 24%)
CMYK
cmyk(0%, 58%, 77%, 76%)
Oklch
oklch(26.8% 0.060 38.9)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#413121

Ochre · DarkSlateGray · Cinnamon

HEX
#413121
RGB
rgb(65, 49, 33)
HSL
hsl(30, 33%, 19%)
HSB
hsb(30, 49%, 25%)
CMYK
cmyk(0%, 25%, 49%, 75%)
Oklch
oklch(32.7% 0.035 66.1)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#878B66

Autumn Sage · Gray · Honey Gold

HEX
#878B66
RGB
rgb(135, 139, 102)
HSL
hsl(66, 15%, 47%)
HSB
hsb(66, 27%, 55%)
CMYK
cmyk(3%, 0%, 27%, 45%)
Oklch
oklch(62.4% 0.053 113.0)

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

#B7A371

Ginger · Tan · Sunflower

HEX
#B7A371
RGB
rgb(183, 163, 113)
HSL
hsl(43, 33%, 58%)
HSB
hsb(43, 38%, 72%)
CMYK
cmyk(0%, 11%, 38%, 28%)
Oklch
oklch(72.1% 0.071 88.7)

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

#C25F59

Crimson · Sienna · Passion Red

HEX
#C25F59
RGB
rgb(194, 95, 89)
HSL
hsl(3, 46%, 55%)
HSB
hsb(3, 54%, 76%)
CMYK
cmyk(0%, 51%, 54%, 24%)
Oklch
oklch(60.3% 0.128 25.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3E1A0E
0E323E

Analogous

3E0E1A
3E1A0E
3E320E

Triadic

3E1A0E
0E3E1A
1A0E3E

Split-Comp.

3E1A0E
0E3E32
0E1A3E

Tetradic

3E1A0E
1A3E0E
0E323E
320E3E

Contrast Matrix WCAG 2.1 Contrast

3E1A0E
413121
878B66
B7A371
C25F59
—
1.2
Fail
4.4
AA Large
6.2
AA
3.7
AA Large
1.2
Fail
—
3.5
AA Large
5.0
AA
3.0
AA Large
4.4
AA Large
3.5
AA Large
—
1.4
Fail
1.2
Fail
6.2
AA
5.0
AA
1.4
Fail
—
1.7
Fail
3.7
AA Large
3.0
AA Large
1.2
Fail
1.7
Fail
—
White BG
15.5AAA
12.5AAA
3.6AA Large
2.5Fail
4.1AA Large
Black BG
1.4Fail
1.7Fail
5.9AA
8.5AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E11
3A3A25
89896F
AEAE7D
97965A

Deuteranopia

313312
3B3C26
898871
B0B180
9DA45B

Tritanopia

3C1314
402829
877678
B68789
BD5C5C

Achromatopsia

232323
343434
868686
A3A3A3
7C7C7C

Shades & Tints Shades & Tints

#3E1A0E

Dark
Light

#413121

Dark
Light

#878B66

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3e1a0e;
  --color-2: #413121;
  --color-3: #878b66;
  --color-4: #b7a371;
  --color-5: #c25f59;
}

SCSS

$color-1: #3e1a0e;
$color-2: #413121;
$color-3: #878b66;
$color-4: #b7a371;
$color-5: #c25f59;

TAILWIND

colors: {
  'brand-1': '#3e1a0e',
  'brand-2': '#413121',
  'brand-3': '#878b66',
  'brand-4': '#b7a371',
  'brand-5': '#c25f59',
}

RGB Array

[62, 26, 14], [65, 49, 33], [135, 139, 102], [183, 163, 113], [194, 95, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3E1A0E, #413121, #878B66, #B7A371, #C25F59 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: #3e1a0e; --color-2: #413121; --color-3: #878b66; --color-4: #b7a371; --color-5: #c25f59. 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