← Back to Editor

#4B1F14 · #8A3C38 · #886418 · #B99B2B · #312622

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 Library

Color Details Color Details

#4B1F14

Crimson · Maroon · Deep Berry

HEX
#4B1F14
RGB
rgb(75, 31, 20)
HSL
hsl(12, 58%, 19%)
HSB
hsb(12, 73%, 29%)
CMYK
cmyk(0%, 59%, 73%, 71%)
Oklch
oklch(30.1% 0.070 35.2)

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

#8A3C38

Crimson · Sienna · Wine Red

HEX
#8A3C38
RGB
rgb(138, 60, 56)
HSL
hsl(3, 42%, 38%)
HSB
hsb(3, 59%, 54%)
CMYK
cmyk(0%, 57%, 59%, 46%)
Oklch
oklch(45.9% 0.108 25.1)

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

#886418

Ochre · Sienna · Honey Gold

HEX
#886418
RGB
rgb(136, 100, 24)
HSL
hsl(41, 70%, 31%)
HSB
hsb(41, 82%, 53%)
CMYK
cmyk(0%, 26%, 82%, 47%)
Oklch
oklch(52.7% 0.099 81.1)

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

#B99B2B

Ochre · GoldenRod · Honey Gold

HEX
#B99B2B
RGB
rgb(185, 155, 43)
HSL
hsl(47, 62%, 45%)
HSB
hsb(47, 77%, 73%)
CMYK
cmyk(0%, 16%, 77%, 27%)
Oklch
oklch(69.7% 0.129 93.2)

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

#312622

Tangerine · DarkSlateGray · Cinnamon

HEX
#312622
RGB
rgb(49, 38, 34)
HSL
hsl(16, 18%, 16%)
HSB
hsb(16, 31%, 19%)
CMYK
cmyk(0%, 22%, 31%, 81%)
Oklch
oklch(28.0% 0.018 41.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B1F14
14414D

Analogous

4D1425
4B1F14
4D3C14

Triadic

4B1F14
144D20
20144D

Split-Comp.

4B1F14
144D3C
14254D

Tetradic

4B1F14
254D14
14414D
3C144D

Contrast Matrix WCAG 2.1 Contrast

4B1F14
8A3C38
886418
B99B2B
312622
—
1.8
Fail
2.6
Fail
5.2
AA
1.1
Fail
1.8
Fail
—
1.4
Fail
2.8
Fail
1.9
Fail
2.6
Fail
1.4
Fail
—
2.0
Fail
2.7
Fail
5.2
AA
2.8
Fail
2.0
Fail
—
5.4
AA
1.1
Fail
1.9
Fail
2.7
Fail
5.4
AA
—
White BG
14.0AAA
7.5AAA
5.4AA
2.7Fail
14.7AAA
Black BG
1.5Fail
2.8Fail
3.9AA Large
7.8AAA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

383817
686839
78782A
ACAC46
2C2C23

Deuteranopia

3B3E17
6D7339
7B7D2F
AEB04D
2D2E23

Tritanopia

491919
863A3A
86393C
B85B60
302424

Achromatopsia

2B2B2B
535353
666666
979797
292929

Shades & Tints Shades & Tints

#4B1F14

Dark
Light

#8A3C38

Dark
Light

#886418

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b1f14;
  --color-2: #8a3c38;
  --color-3: #886418;
  --color-4: #b99b2b;
  --color-5: #312622;
}

SCSS

$color-1: #4b1f14;
$color-2: #8a3c38;
$color-3: #886418;
$color-4: #b99b2b;
$color-5: #312622;

TAILWIND

colors: {
  'brand-1': '#4b1f14',
  'brand-2': '#8a3c38',
  'brand-3': '#886418',
  'brand-4': '#b99b2b',
  'brand-5': '#312622',
}

RGB Array

[75, 31, 20], [138, 60, 56], [136, 100, 24], [185, 155, 43], [49, 38, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4B1F14, #8A3C38, #886418, #B99B2B, #312622 is ideal for: tech websites, dark mode UIs, game UIs. 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: #4b1f14; --color-2: #8a3c38; --color-3: #886418; --color-4: #b99b2b; --color-5: #312622. 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. 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