← Back to Editor

#2C2C41 · #8A607B · #C5A4A4 · #DCCBB6 · #A2AFAE

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

#2C2C41

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#2C2C41
RGB
rgb(44, 44, 65)
HSL
hsl(240, 19%, 21%)
HSB
hsb(240, 32%, 25%)
CMYK
cmyk(32%, 32%, 0%, 75%)
Oklch
oklch(30.3% 0.038 283.9)

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

#8A607B

Rose Purple · Gray · Camellia

HEX
#8A607B
RGB
rgb(138, 96, 123)
HSL
hsl(321, 18%, 46%)
HSB
hsb(321, 30%, 54%)
CMYK
cmyk(0%, 30%, 11%, 46%)
Oklch
oklch(54.2% 0.066 340.7)

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

#C5A4A4

Peach Pink · DarkGray · Coral Red

HEX
#C5A4A4
RGB
rgb(197, 164, 164)
HSL
hsl(0, 22%, 71%)
HSB
hsb(0, 17%, 77%)
CMYK
cmyk(0%, 17%, 17%, 23%)
Oklch
oklch(74.8% 0.039 18.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#DCCBB6

Goose Yellow · LightGray · Peach Orange

HEX
#DCCBB6
RGB
rgb(220, 203, 182)
HSL
hsl(33, 35%, 79%)
HSB
hsb(33, 17%, 86%)
CMYK
cmyk(0%, 8%, 17%, 14%)
Oklch
oklch(85.0% 0.034 73.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#A2AFAE

Jade · DarkGray · Silver Sand

HEX
#A2AFAE
RGB
rgb(162, 175, 174)
HSL
hsl(175, 8%, 66%)
HSB
hsb(175, 7%, 69%)
CMYK
cmyk(7%, 0%, 1%, 31%)
Oklch
oklch(74.4% 0.015 191.3)

Traditional「Jade」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C2C41
40402B

Analogous

2B3640
2C2C41
362B40

Triadic

2C2C41
402B2B
2B402B

Split-Comp.

2C2C41
40362B
36402B

Tetradic

2C2C41
402B36
40402B
2B4036

Contrast Matrix WCAG 2.1 Contrast

2C2C41
8A607B
C5A4A4
DCCBB6
A2AFAE
—
2.6
Fail
6.0
AA
8.6
AAA
6.0
AA
2.6
Fail
—
2.3
Fail
3.3
AA Large
2.3
Fail
6.0
AA
2.3
Fail
—
1.4
Fail
1.0
Fail
8.6
AAA
3.3
AA Large
1.4
Fail
—
1.4
Fail
6.0
AA
2.3
Fail
1.0
Fail
1.4
Fail
—
White BG
13.6AAA
5.2AA
2.3Fail
1.6Fail
2.3Fail
Black BG
1.5Fail
4.0AA Large
9.2AAA
13.3AAA
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2C2C3C
787774
B7B6A4
D5D4BB
A8A8AE

Deuteranopia

2C2C3B
7A7D73
B9BBA4
D6D7BC
A7A6AE

Tritanopia

2C3837
886F6E
C3A4A4
DBBFC0
A3AEAE

Achromatopsia

2E2E2E
707070
AEAEAE
CECECE
ABABAB

Shades & Tints Shades & Tints

#2C2C41

Dark
Light

#8A607B

Dark
Light

#C5A4A4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c2c41;
  --color-2: #8a607b;
  --color-3: #c5a4a4;
  --color-4: #dccbb6;
  --color-5: #a2afae;
}

SCSS

$color-1: #2c2c41;
$color-2: #8a607b;
$color-3: #c5a4a4;
$color-4: #dccbb6;
$color-5: #a2afae;

TAILWIND

colors: {
  'brand-1': '#2c2c41',
  'brand-2': '#8a607b',
  'brand-3': '#c5a4a4',
  'brand-4': '#dccbb6',
  'brand-5': '#a2afae',
}

RGB Array

[44, 44, 65], [138, 96, 123], [197, 164, 164], [220, 203, 182], [162, 175, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C2C41, #8A607B, #C5A4A4, #DCCBB6, #A2AFAE 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: #2c2c41; --color-2: #8a607b; --color-3: #c5a4a4; --color-4: #dccbb6; --color-5: #a2afae. 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