← Back to Editor

#BD1D28 · #A76C67 · #AFBCB6 · #475861 · #3B4856

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 LibraryData Visualization

Color Details Color Details

#BD1D28

Vermilion · FireBrick · Passion Red

HEX
#BD1D28
RGB
rgb(189, 29, 40)
HSL
hsl(356, 73%, 43%)
HSB
hsb(356, 85%, 74%)
CMYK
cmyk(0%, 85%, 79%, 26%)
Oklch
oklch(51.5% 0.192 24.7)

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

#A76C67

Crimson · Gray · Passion Red

HEX
#A76C67
RGB
rgb(167, 108, 103)
HSL
hsl(5, 27%, 53%)
HSB
hsb(5, 38%, 65%)
CMYK
cmyk(0%, 35%, 38%, 35%)
Oklch
oklch(59.3% 0.076 24.9)

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

#AFBCB6

Jade · Silver · Pearl Gray

HEX
#AFBCB6
RGB
rgb(175, 188, 182)
HSL
hsl(152, 9%, 71%)
HSB
hsb(152, 7%, 74%)
CMYK
cmyk(7%, 0%, 3%, 26%)
Oklch
oklch(78.3% 0.017 166.6)

Traditional「Jade」· Paint「Pearl Gray」· Creative Silver Lining

#475861

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#475861
RGB
rgb(71, 88, 97)
HSL
hsl(201, 15%, 33%)
HSB
hsb(201, 27%, 38%)
CMYK
cmyk(27%, 9%, 0%, 62%)
Oklch
oklch(44.9% 0.026 231.1)

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

#3B4856

Indigo · DarkSlateGray · Prussian Blue

HEX
#3B4856
RGB
rgb(59, 72, 86)
HSL
hsl(211, 19%, 28%)
HSB
hsb(211, 31%, 34%)
CMYK
cmyk(31%, 16%, 0%, 66%)
Oklch
oklch(39.6% 0.029 250.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BD1D28
1EBEB3

Analogous

BE1E78
BD1D28
BE631E

Triadic

BD1D28
28BE1E
1E28BE

Split-Comp.

BD1D28
1EBE63
1E78BE

Tetradic

BD1D28
78BE1E
1EBEB3
631EBE

Contrast Matrix WCAG 2.1 Contrast

BD1D28
A76C67
AFBCB6
475861
3B4856
—
1.5
Fail
3.2
AA Large
1.2
Fail
1.5
Fail
1.5
Fail
—
2.1
Fail
1.8
Fail
2.2
Fail
3.2
AA Large
2.1
Fail
—
3.8
AA Large
4.8
AA
1.2
Fail
1.8
Fail
3.8
AA Large
—
1.3
Fail
1.5
Fail
2.2
Fail
4.8
AA
1.3
Fail
—
White BG
6.2AA
4.2AA Large
2.0Fail
7.4AAA
9.3AAA
Black BG
3.4AA Large
5.0AA
10.7AAA
2.8Fail
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

787625
8D8D68
B5B5B7
4E4F5F
414153

Deuteranopia

818D25
919569
B4B3B8
4D4C5E
403F52

Tritanopia

B52323
A46969
B0B9B9
485D5D
3C504F

Achromatopsia

4E4E4E
7D7D7D
B7B7B7
545454
464646

Shades & Tints Shades & Tints

#BD1D28

Dark
Light

#A76C67

Dark
Light

#AFBCB6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bd1d28;
  --color-2: #a76c67;
  --color-3: #afbcb6;
  --color-4: #475861;
  --color-5: #3b4856;
}

SCSS

$color-1: #bd1d28;
$color-2: #a76c67;
$color-3: #afbcb6;
$color-4: #475861;
$color-5: #3b4856;

TAILWIND

colors: {
  'brand-1': '#bd1d28',
  'brand-2': '#a76c67',
  'brand-3': '#afbcb6',
  'brand-4': '#475861',
  'brand-5': '#3b4856',
}

RGB Array

[189, 29, 40], [167, 108, 103], [175, 188, 182], [71, 88, 97], [59, 72, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BD1D28, #A76C67, #AFBCB6, #475861, #3B4856 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #bd1d28; --color-2: #a76c67; --color-3: #afbcb6; --color-4: #475861; --color-5: #3b4856. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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