← Back to Editor

#B94949 · #D13838 · #B02B2B · #414C56 · #5B636B

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B94949

Crimson · Sienna · Passion Red

HEX
#B94949
RGB
rgb(185, 73, 73)
HSL
hsl(0, 44%, 51%)
HSB
hsb(0, 61%, 73%)
CMYK
cmyk(0%, 61%, 61%, 27%)
Oklch
oklch(55.5% 0.146 23.1)

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

#D13838

Vermilion · Crimson · Passion Red

HEX
#D13838
RGB
rgb(209, 56, 56)
HSL
hsl(0, 62%, 52%)
HSB
hsb(0, 73%, 82%)
CMYK
cmyk(0%, 73%, 73%, 18%)
Oklch
oklch(57.3% 0.190 25.5)

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

#B02B2B

Vermilion · Brown · Passion Red

HEX
#B02B2B
RGB
rgb(176, 43, 43)
HSL
hsl(0, 61%, 43%)
HSB
hsb(0, 76%, 69%)
CMYK
cmyk(0%, 76%, 76%, 31%)
Oklch
oklch(50.2% 0.170 25.8)

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

#414C56

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#414C56
RGB
rgb(65, 76, 86)
HSL
hsl(209, 14%, 30%)
HSB
hsb(209, 24%, 34%)
CMYK
cmyk(24%, 12%, 0%, 66%)
Oklch
oklch(41.1% 0.022 245.8)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#5B636B

Indigo · DimGray · Charcoal

HEX
#5B636B
RGB
rgb(91, 99, 107)
HSL
hsl(210, 8%, 39%)
HSB
hsb(210, 15%, 42%)
CMYK
cmyk(15%, 7%, 0%, 58%)
Oklch
oklch(49.6% 0.016 248.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B94949
4BB9B9

Analogous

B94B82
B94949
B9824B

Triadic

B94949
4BB94B
4B4BB9

Split-Comp.

B94949
4BB982
4B82B9

Tetradic

B94949
82B94B
4BB9B9
824BB9

Contrast Matrix WCAG 2.1 Contrast

B94949
D13838
B02B2B
414C56
5B636B
—
1.1
Fail
1.3
Fail
1.7
Fail
1.2
Fail
1.1
Fail
—
1.3
Fail
1.8
Fail
1.3
Fail
1.3
Fail
1.3
Fail
—
1.3
Fail
1.1
Fail
1.7
Fail
1.8
Fail
1.3
Fail
—
1.4
Fail
1.2
Fail
1.3
Fail
1.1
Fail
1.4
Fail
—
White BG
5.1AA
4.8AA
6.5AA
8.8AAA
6.1AA
Black BG
4.1AA Large
4.3AA Large
3.2AA Large
2.4Fail
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

898749
8F8D38
76752B
464654
5E5F69

Deuteranopia

8F9749
98A338
7E882B
454453
5E5D69

Tritanopia

B34949
C93838
A92B2B
425251
5B6867

Achromatopsia

6A6A6A
666666
535353
4A4A4A
626262

Shades & Tints Shades & Tints

#B94949

Dark
Light

#D13838

Dark
Light

#B02B2B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b94949;
  --color-2: #d13838;
  --color-3: #b02b2b;
  --color-4: #414c56;
  --color-5: #5b636b;
}

SCSS

$color-1: #b94949;
$color-2: #d13838;
$color-3: #b02b2b;
$color-4: #414c56;
$color-5: #5b636b;

TAILWIND

colors: {
  'brand-1': '#b94949',
  'brand-2': '#d13838',
  'brand-3': '#b02b2b',
  'brand-4': '#414c56',
  'brand-5': '#5b636b',
}

RGB Array

[185, 73, 73], [209, 56, 56], [176, 43, 43], [65, 76, 86], [91, 99, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B94949, #D13838, #B02B2B, #414C56, #5B636B is ideal for: corporate websites, product showcases, portfolios. 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: #b94949; --color-2: #d13838; --color-3: #b02b2b; --color-4: #414c56; --color-5: #5b636b. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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