← Back to Editor

#341F1E · #412C2B · #7C273A · #AE5B40 · #B78A51

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

#341F1E

Crimson · Black · Deep Berry

HEX
#341F1E
RGB
rgb(52, 31, 30)
HSL
hsl(3, 27%, 16%)
HSB
hsb(3, 42%, 20%)
CMYK
cmyk(0%, 40%, 42%, 80%)
Oklch
oklch(26.6% 0.033 22.5)

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

#412C2B

Crimson · DarkSlateGray · Wine Red

HEX
#412C2B
RGB
rgb(65, 44, 43)
HSL
hsl(3, 20%, 21%)
HSB
hsb(3, 34%, 25%)
CMYK
cmyk(0%, 32%, 34%, 75%)
Oklch
oklch(31.8% 0.031 22.0)

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

#7C273A

Crimson · Brown · Wine Red

HEX
#7C273A
RGB
rgb(124, 39, 58)
HSL
hsl(347, 52%, 32%)
HSB
hsb(347, 69%, 49%)
CMYK
cmyk(0%, 69%, 53%, 51%)
Oklch
oklch(40.7% 0.118 10.7)

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

#AE5B40

Tangerine · Sienna · Amber Brown

HEX
#AE5B40
RGB
rgb(174, 91, 64)
HSL
hsl(15, 46%, 47%)
HSB
hsb(15, 63%, 68%)
CMYK
cmyk(0%, 48%, 63%, 32%)
Oklch
oklch(56.4% 0.116 38.7)

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

#B78A51

Ginger · DarkSalmon · Warm Sun

HEX
#B78A51
RGB
rgb(183, 138, 81)
HSL
hsl(34, 41%, 52%)
HSB
hsb(34, 56%, 72%)
CMYK
cmyk(0%, 25%, 56%, 28%)
Oklch
oklch(66.5% 0.092 71.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

341F1E
1E3334

Analogous

341E28
341F1E
342A1E

Triadic

341F1E
1E341F
1F1E34

Split-Comp.

341F1E
1E342A
1E2834

Tetradic

341F1E
28341E
1E3334
2A1E34

Contrast Matrix WCAG 2.1 Contrast

341F1E
412C2B
7C273A
AE5B40
B78A51
—
1.2
Fail
1.6
Fail
3.2
AA Large
5.0
AA
1.2
Fail
—
1.4
Fail
2.7
Fail
4.2
AA Large
1.6
Fail
1.4
Fail
—
2.0
Fail
3.1
AA Large
3.2
AA Large
2.7
Fail
2.0
Fail
—
1.5
Fail
5.0
AA
4.2
AA Large
3.1
AA Large
1.5
Fail
—
White BG
15.4AAA
13.0AAA
9.5AAA
4.8AA
3.1AA Large
Black BG
1.4Fail
1.6Fail
2.2Fail
4.4AA Large
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B1E
38382B
575635
8A8947
A4A35F

Deuteranopia

2C2E1E
393B2B
5C6334
8F9548
A6AA62

Tritanopia

331E1E
402B2B
783231
AA4C4D
B56A6C

Achromatopsia

252525
323232
434343
717171
919191

Shades & Tints Shades & Tints

#341F1E

Dark
Light

#412C2B

Dark
Light

#7C273A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #341f1e;
  --color-2: #412c2b;
  --color-3: #7c273a;
  --color-4: #ae5b40;
  --color-5: #b78a51;
}

SCSS

$color-1: #341f1e;
$color-2: #412c2b;
$color-3: #7c273a;
$color-4: #ae5b40;
$color-5: #b78a51;

TAILWIND

colors: {
  'brand-1': '#341f1e',
  'brand-2': '#412c2b',
  'brand-3': '#7c273a',
  'brand-4': '#ae5b40',
  'brand-5': '#b78a51',
}

RGB Array

[52, 31, 30], [65, 44, 43], [124, 39, 58], [174, 91, 64], [183, 138, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #341F1E, #412C2B, #7C273A, #AE5B40, #B78A51 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: #341f1e; --color-2: #412c2b; --color-3: #7c273a; --color-4: #ae5b40; --color-5: #b78a51. 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