#641616 + #B97F2F + #E4B33C + #79393D + #5A163D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#641616

Vermilion · Maroon · Wine Red

HEX

#641616

RGB

rgb(100, 22, 22)

HSL

hsl(0, 64%, 24%)

HSB

hsb(0, 78%, 39%)

CMYK

cmyk(0%, 78%, 78%, 61%)

Oklch

oklch(33.5% 0.111 25.5)

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

#B97F2F

Ochre · DarkGoldenRod · Amber Brown

HEX

#B97F2F

RGB

rgb(185, 127, 47)

HSL

hsl(35, 59%, 45%)

HSB

hsb(35, 75%, 73%)

CMYK

cmyk(0%, 31%, 75%, 27%)

Oklch

oklch(64.1% 0.118 71.1)

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

#E4B33C

Ginger · GoldenRod · Sunflower

HEX

#E4B33C

RGB

rgb(228, 179, 60)

HSL

hsl(42, 76%, 56%)

HSB

hsb(42, 74%, 89%)

CMYK

cmyk(0%, 21%, 74%, 11%)

Oklch

oklch(79.1% 0.142 85.4)

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

#79393D

Crimson · Sienna · Wine Red

HEX

#79393D

RGB

rgb(121, 57, 61)

HSL

hsl(356, 36%, 35%)

HSB

hsb(356, 53%, 47%)

CMYK

cmyk(0%, 53%, 50%, 53%)

Oklch

oklch(42.9% 0.089 17.7)

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

#5A163D

Rose Purple · DarkSlateGray · Raspberry

HEX

#5A163D

RGB

rgb(90, 22, 61)

HSL

hsl(326, 61%, 22%)

HSB

hsb(326, 76%, 35%)

CMYK

cmyk(0%, 76%, 32%, 65%)

Oklch

oklch(32.8% 0.108 349.4)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

641616

166464

Analogous

64163D

641616

643D16

Triadic

641616

166416

161664

Split-Comp.

641616

16643D

163D64

Tetradic

641616

3D6416

166464

3D1664

Contrast Matrix WCAG 2.1 Contrast

641616	B97F2F	E4B33C	79393D	5A163D
—	3.7 AA Large	6.5 AA	1.5 Fail	1.0 Fail
3.7 AA Large	—	1.8 Fail	2.5 Fail	3.8 AA Large
6.5 AA	1.8 Fail	—	4.4 AA Large	6.7 AA
1.5 Fail	2.5 Fail	4.4 AA Large	—	1.5 Fail
1.0 Fail	3.8 AA Large	6.7 AA	1.5 Fail	—

White BG

12.6AAA

3.4AA Large

1.9Fail

8.5AAA

13.0AAA

Black BG

1.7Fail

6.1AA

10.8AAA

2.5Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

424216

A09F42

CFCE59

5D5D3C

3D3C34

Deuteranopia

474D16

A3A847

D2D560

61663C

414631

Tritanopia

601616

B65255

E27075

763B3B

572C2A

Achromatopsia

2D2D2D

878787

B4B4B4

4D4D4D

2F2F2F

Shades & Tints Shades & Tints

#641616

Dark

Light

#B97F2F

Dark

Light

#E4B33C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #641616;
  --color-2: #b97f2f;
  --color-3: #e4b33c;
  --color-4: #79393d;
  --color-5: #5a163d;
}

SCSS

$color-1: #641616;
$color-2: #b97f2f;
$color-3: #e4b33c;
$color-4: #79393d;
$color-5: #5a163d;

TAILWIND

colors: {
  'brand-1': '#641616',
  'brand-2': '#b97f2f',
  'brand-3': '#e4b33c',
  'brand-4': '#79393d',
  'brand-5': '#5a163d',
}

RGB Array

[100, 22, 22], [185, 127, 47], [228, 179, 60], [121, 57, 61], [90, 22, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #641616, #B97F2F, #E4B33C, #79393D, #5A163D 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: #641616; --color-2: #b97f2f; --color-3: #e4b33c; --color-4: #79393d; --color-5: #5a163d. 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