← Back to Editor

#2F2B33 · #8C3247 · #D64F4F · #B5AE9A · #1C1719

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#2F2B33

Dark Plum · DarkSlateGray · Dark Stone

HEX
#2F2B33
RGB
rgb(47, 43, 51)
HSL
hsl(270, 9%, 18%)
HSB
hsb(270, 16%, 20%)
CMYK
cmyk(8%, 16%, 0%, 80%)
Oklch
oklch(29.7% 0.015 307.9)

Traditional「Dark Plum」· Paint「Dark Stone」· Creative Midnight Shadow

#8C3247

Crimson · Brown · Wine Red

HEX
#8C3247
RGB
rgb(140, 50, 71)
HSL
hsl(346, 47%, 37%)
HSB
hsb(346, 64%, 55%)
CMYK
cmyk(0%, 64%, 49%, 45%)
Oklch
oklch(45.2% 0.123 9.2)

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

#D64F4F

Vermilion · Tomato · Passion Red

HEX
#D64F4F
RGB
rgb(214, 79, 79)
HSL
hsl(0, 62%, 57%)
HSB
hsb(0, 63%, 84%)
CMYK
cmyk(0%, 63%, 63%, 16%)
Oklch
oklch(61.0% 0.170 23.6)

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

#B5AE9A

Ginger · DarkGray · Sunflower

HEX
#B5AE9A
RGB
rgb(181, 174, 154)
HSL
hsl(44, 15%, 66%)
HSB
hsb(44, 15%, 71%)
CMYK
cmyk(0%, 4%, 15%, 29%)
Oklch
oklch(75.1% 0.029 91.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#1C1719

Dark Violet · Black · Raspberry

HEX
#1C1719
RGB
rgb(28, 23, 25)
HSL
hsl(336, 10%, 10%)
HSB
hsb(336, 18%, 11%)
CMYK
cmyk(0%, 18%, 11%, 89%)
Oklch
oklch(21.1% 0.009 351.8)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F2B33
2E322A

Analogous

2A2A32
2F2B33
322A32

Triadic

2F2B33
322E2A
2A322E

Split-Comp.

2F2B33
32322A
2A322A

Tetradic

2F2B33
322A2A
2E322A
2A3232

Contrast Matrix WCAG 2.1 Contrast

2F2B33
8C3247
D64F4F
B5AE9A
1C1719
—
1.8
Fail
3.4
AA Large
6.3
AA
1.3
Fail
1.8
Fail
—
1.9
Fail
3.6
AA Large
2.2
Fail
3.4
AA Large
1.9
Fail
—
1.9
Fail
4.3
AA Large
6.3
AA
3.6
AA Large
1.9
Fail
—
8.0
AAA
1.3
Fail
2.2
Fail
4.3
AA Large
8.0
AAA
—
White BG
13.9AAA
7.9AAA
4.1AA Large
2.2Fail
17.7AAA
Black BG
1.5Fail
2.7Fail
5.1AA
9.5AAA
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2D31
656442
9C9A4F
B2B29F
1A1A19

Deuteranopia

2E2E31
6A7141
A3AD4F
B2B3A0
1A1A18

Tritanopia

2F302F
883E3D
CF4F4F
B5A3A4
1C1818

Achromatopsia

2D2D2D
4F4F4F
777777
AEAEAE
191919

Shades & Tints Shades & Tints

#2F2B33

Dark
Light

#8C3247

Dark
Light

#D64F4F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f2b33;
  --color-2: #8c3247;
  --color-3: #d64f4f;
  --color-4: #b5ae9a;
  --color-5: #1c1719;
}

SCSS

$color-1: #2f2b33;
$color-2: #8c3247;
$color-3: #d64f4f;
$color-4: #b5ae9a;
$color-5: #1c1719;

TAILWIND

colors: {
  'brand-1': '#2f2b33',
  'brand-2': '#8c3247',
  'brand-3': '#d64f4f',
  'brand-4': '#b5ae9a',
  'brand-5': '#1c1719',
}

RGB Array

[47, 43, 51], [140, 50, 71], [214, 79, 79], [181, 174, 154], [28, 23, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F2B33, #8C3247, #D64F4F, #B5AE9A, #1C1719 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #2f2b33; --color-2: #8c3247; --color-3: #d64f4f; --color-4: #b5ae9a; --color-5: #1c1719. 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. 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 finance, legal, luxury 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