← Back to Editor

#2B2533 · #3F4352 · #805B7D · #A66F89 · #CC7A80

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

#2B2533

Deep Indigo · DarkSlateGray · Dark Purple

HEX
#2B2533
RGB
rgb(43, 37, 51)
HSL
hsl(266, 16%, 17%)
HSB
hsb(266, 27%, 20%)
CMYK
cmyk(16%, 27%, 0%, 80%)
Oklch
oklch(27.7% 0.027 304.2)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#3F4352

Indigo · DarkSlateGray · Prussian Blue

HEX
#3F4352
RGB
rgb(63, 67, 82)
HSL
hsl(227, 13%, 28%)
HSB
hsb(227, 23%, 32%)
CMYK
cmyk(23%, 18%, 0%, 68%)
Oklch
oklch(38.5% 0.026 273.4)

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

#805B7D

Rose Purple · DimGray · Violet

HEX
#805B7D
RGB
rgb(128, 91, 125)
HSL
hsl(305, 17%, 43%)
HSB
hsb(305, 29%, 50%)
CMYK
cmyk(0%, 29%, 2%, 50%)
Oklch
oklch(52.2% 0.069 329.3)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#A66F89

Dark Violet · Gray · Rose Pink

HEX
#A66F89
RGB
rgb(166, 111, 137)
HSL
hsl(332, 24%, 54%)
HSB
hsb(332, 33%, 65%)
CMYK
cmyk(0%, 33%, 17%, 35%)
Oklch
oklch(60.7% 0.078 349.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#CC7A80

Peach Pink · LightCoral · Coral Red

HEX
#CC7A80
RGB
rgb(204, 122, 128)
HSL
hsl(356, 45%, 64%)
HSB
hsb(356, 40%, 80%)
CMYK
cmyk(0%, 40%, 37%, 20%)
Oklch
oklch(66.9% 0.103 15.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2B2533
2C3224

Analogous

242532
2B2533
312432

Triadic

2B2533
322A24
24322A

Split-Comp.

2B2533
323124
253224

Tetradic

2B2533
322425
2C3224
243231

Contrast Matrix WCAG 2.1 Contrast

2B2533
3F4352
805B7D
A66F89
CC7A80
—
1.5
Fail
2.6
Fail
3.7
AA Large
4.7
AA
1.5
Fail
—
1.7
Fail
2.5
Fail
3.1
AA Large
2.6
Fail
1.7
Fail
—
1.4
Fail
1.8
Fail
3.7
AA Large
2.5
Fail
1.4
Fail
—
1.3
Fail
4.7
AA
3.1
AA Large
1.8
Fail
1.3
Fail
—
White BG
14.8AAA
9.8AAA
5.7AA
4.0AA Large
3.2AA Large
Black BG
1.4Fail
2.1Fail
3.7AA Large
5.3AA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

282830
41414E
707075
8E8E83
A8A87F

Deuteranopia

29292F
41404E
727573
919681
ADB37E

Tritanopia

2B2D2C
3F4C4B
7E6E6D
A37E7D
C87D7D

Achromatopsia

282828
444444
6A6A6A
828282
939393

Shades & Tints Shades & Tints

#2B2533

Dark
Light

#3F4352

Dark
Light

#805B7D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2b2533;
  --color-2: #3f4352;
  --color-3: #805b7d;
  --color-4: #a66f89;
  --color-5: #cc7a80;
}

SCSS

$color-1: #2b2533;
$color-2: #3f4352;
$color-3: #805b7d;
$color-4: #a66f89;
$color-5: #cc7a80;

TAILWIND

colors: {
  'brand-1': '#2b2533',
  'brand-2': '#3f4352',
  'brand-3': '#805b7d',
  'brand-4': '#a66f89',
  'brand-5': '#cc7a80',
}

RGB Array

[43, 37, 51], [63, 67, 82], [128, 91, 125], [166, 111, 137], [204, 122, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2B2533, #3F4352, #805B7D, #A66F89, #CC7A80 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: #2b2533; --color-2: #3f4352; --color-3: #805b7d; --color-4: #a66f89; --color-5: #cc7a80. 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