← Back to Editor

#2A171B · #4D2732 · #8F6674 · #B397A6 · #D7C3CC

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2A171B

Crimson · Black · Deep Berry

HEX
#2A171B
RGB
rgb(42, 23, 27)
HSL
hsl(347, 29%, 13%)
HSB
hsb(347, 45%, 16%)
CMYK
cmyk(0%, 45%, 36%, 84%)
Oklch
oklch(23.2% 0.031 6.1)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#4D2732

Dark Violet · DarkSlateGray · Raspberry

HEX
#4D2732
RGB
rgb(77, 39, 50)
HSL
hsl(343, 33%, 23%)
HSB
hsb(343, 49%, 30%)
CMYK
cmyk(0%, 49%, 35%, 70%)
Oklch
oklch(32.7% 0.059 2.3)

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

#8F6674

Dark Violet · Gray · Camellia

HEX
#8F6674
RGB
rgb(143, 102, 116)
HSL
hsl(340, 17%, 48%)
HSB
hsb(340, 29%, 56%)
CMYK
cmyk(0%, 29%, 19%, 44%)
Oklch
oklch(55.7% 0.056 356.8)

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

#B397A6

Mauve · DarkGray · Rose Pink

HEX
#B397A6
RGB
rgb(179, 151, 166)
HSL
hsl(328, 16%, 65%)
HSB
hsb(328, 16%, 70%)
CMYK
cmyk(0%, 16%, 7%, 30%)
Oklch
oklch(70.6% 0.039 344.7)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#D7C3CC

Rouge · LightGray · Cherry Blossom

HEX
#D7C3CC
RGB
rgb(215, 195, 204)
HSL
hsl(333, 20%, 80%)
HSB
hsb(333, 9%, 84%)
CMYK
cmyk(0%, 9%, 5%, 16%)
Oklch
oklch(83.6% 0.025 348.6)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A171B
182B27

Analogous

2B1825
2A171B
2B1D18

Triadic

2A171B
1C2B18
181C2B

Split-Comp.

2A171B
182B1D
18252B

Tetradic

2A171B
252B18
182B27
1D182B

Contrast Matrix WCAG 2.1 Contrast

2A171B
4D2732
8F6674
B397A6
D7C3CC
—
1.3
Fail
3.5
AA Large
6.4
AA
10.2
AAA
1.3
Fail
—
2.6
Fail
4.8
AA
7.6
AAA
3.5
AA Large
2.6
Fail
—
1.8
Fail
2.9
Fail
6.4
AA
4.8
AA
1.8
Fail
—
1.6
Fail
10.2
AAA
7.6
AAA
2.9
Fail
1.6
Fail
—
White BG
17.0AAA
12.7AAA
4.9AA
2.7Fail
1.7Fail
Black BG
1.2Fail
1.7Fail
4.3AA Large
7.9AAA
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

22221A
3D3C2F
7D7D71
A7A7A2
CECECA

Deuteranopia

23241A
3F422F
808370
A9ABA2
D0D1C9

Tritanopia

291919
4B2D2D
8D6E6D
B2A09F
D6C8C8

Achromatopsia

1D1D1D
343434
747474
A1A1A1
CACACA

Shades & Tints Shades & Tints

#2A171B

Dark
Light

#4D2732

Dark
Light

#8F6674

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a171b;
  --color-2: #4d2732;
  --color-3: #8f6674;
  --color-4: #b397a6;
  --color-5: #d7c3cc;
}

SCSS

$color-1: #2a171b;
$color-2: #4d2732;
$color-3: #8f6674;
$color-4: #b397a6;
$color-5: #d7c3cc;

TAILWIND

colors: {
  'brand-1': '#2a171b',
  'brand-2': '#4d2732',
  'brand-3': '#8f6674',
  'brand-4': '#b397a6',
  'brand-5': '#d7c3cc',
}

RGB Array

[42, 23, 27], [77, 39, 50], [143, 102, 116], [179, 151, 166], [215, 195, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2A171B, #4D2732, #8F6674, #B397A6, #D7C3CC 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: #2a171b; --color-2: #4d2732; --color-3: #8f6674; --color-4: #b397a6; --color-5: #d7c3cc. 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