#5E3939 + #BF513B + #EB5523 + #5B5D6B + #302745 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5E3939

Crimson · DarkOliveGreen · Wine Red

HEX

#5E3939

RGB

rgb(94, 57, 57)

HSL

hsl(0, 25%, 30%)

HSB

hsb(0, 39%, 37%)

CMYK

cmyk(0%, 39%, 39%, 63%)

Oklch

oklch(38.9% 0.053 19.7)

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

#BF513B

Crimson · Sienna · Passion Red

HEX

#BF513B

RGB

rgb(191, 81, 59)

HSL

hsl(10, 53%, 49%)

HSB

hsb(10, 69%, 75%)

CMYK

cmyk(0%, 58%, 69%, 25%)

Oklch

oklch(57.3% 0.147 33.0)

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

#EB5523

Tangerine · Chocolate · Warm Sun

HEX

#EB5523

RGB

rgb(235, 85, 35)

HSL

hsl(15, 83%, 53%)

HSB

hsb(15, 85%, 92%)

CMYK

cmyk(0%, 64%, 85%, 8%)

Oklch

oklch(64.5% 0.195 37.4)

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

#5B5D6B

Indigo · DimGray · Charcoal

HEX

#5B5D6B

RGB

rgb(91, 93, 107)

HSL

hsl(233, 8%, 39%)

HSB

hsb(233, 15%, 42%)

CMYK

cmyk(15%, 13%, 0%, 58%)

Oklch

oklch(48.2% 0.023 279.1)

Traditional「Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#302745

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#302745

RGB

rgb(48, 39, 69)

HSL

hsl(258, 28%, 21%)

HSB

hsb(258, 43%, 27%)

CMYK

cmyk(30%, 43%, 0%, 73%)

Oklch

oklch(29.7% 0.054 296.8)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5E3939

396060

Analogous

60394D

5E3939

604D39

Triadic

5E3939

396039

393960

Split-Comp.

5E3939

39604D

394D60

Tetradic

5E3939

4D6039

396060

4D3960

Contrast Matrix WCAG 2.1 Contrast

5E3939	BF513B	EB5523	5B5D6B	302745
—	2.1 Fail	2.8 Fail	1.5 Fail	1.4 Fail
2.1 Fail	—	1.3 Fail	1.4 Fail	3.0 Fail
2.8 Fail	1.3 Fail	—	1.8 Fail	3.9 AA Large
1.5 Fail	1.4 Fail	1.8 Fail	—	2.1 Fail
1.4 Fail	3.0 Fail	3.9 AA Large	2.1 Fail	—

White BG

9.9AAA

4.7AA

3.6AA Large

6.5AA

14.0AAA

Black BG

2.1Fail

4.5AA Large

5.9AA

3.2AA Large

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E39

8F8E40

AAA92F

5C5C68

2C2C3E

Deuteranopia

505339

969E42

B3BE32

5C5C67

2D2D3C

Tritanopia

5C3939

BA4545

E4393B

5B6564

303837

Achromatopsia

444444

6F6F6F

7C7C7C

5E5E5E

2D2D2D

Shades & Tints Shades & Tints

#5E3939

Dark

Light

#BF513B

Dark

Light

#EB5523

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5e3939;
  --color-2: #bf513b;
  --color-3: #eb5523;
  --color-4: #5b5d6b;
  --color-5: #302745;
}

SCSS

$color-1: #5e3939;
$color-2: #bf513b;
$color-3: #eb5523;
$color-4: #5b5d6b;
$color-5: #302745;

TAILWIND

colors: {
  'brand-1': '#5e3939',
  'brand-2': '#bf513b',
  'brand-3': '#eb5523',
  'brand-4': '#5b5d6b',
  'brand-5': '#302745',
}

RGB Array

[94, 57, 57], [191, 81, 59], [235, 85, 35], [91, 93, 107], [48, 39, 69]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5E3939, #BF513B, #EB5523, #5B5D6B, #302745 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: #5e3939; --color-2: #bf513b; --color-3: #eb5523; --color-4: #5b5d6b; --color-5: #302745. 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