← Back to Editor

#CCC1A3 · #8A5A70 · #3D3145 · #171C32 · #172C41

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

#CCC1A3

Goose Yellow · Tan · Sunflower

HEX
#CCC1A3
RGB
rgb(204, 193, 163)
HSL
hsl(44, 29%, 72%)
HSB
hsb(44, 20%, 80%)
CMYK
cmyk(0%, 5%, 20%, 20%)
Oklch
oklch(81.2% 0.042 90.3)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#8A5A70

Dark Violet · DimGray · Camellia

HEX
#8A5A70
RGB
rgb(138, 90, 112)
HSL
hsl(333, 21%, 45%)
HSB
hsb(333, 35%, 54%)
CMYK
cmyk(0%, 35%, 19%, 46%)
Oklch
oklch(52.7% 0.070 350.7)

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

#3D3145

Dark Plum · DarkSlateGray · Eggplant

HEX
#3D3145
RGB
rgb(61, 49, 69)
HSL
hsl(276, 17%, 23%)
HSB
hsb(276, 29%, 27%)
CMYK
cmyk(12%, 29%, 0%, 73%)
Oklch
oklch(33.5% 0.038 311.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#171C32

Indigo · Black · Deep Sea Blue

HEX
#171C32
RGB
rgb(23, 28, 50)
HSL
hsl(229, 37%, 14%)
HSB
hsb(229, 54%, 20%)
CMYK
cmyk(54%, 44%, 0%, 80%)
Oklch
oklch(23.3% 0.043 272.9)

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

#172C41

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#172C41
RGB
rgb(23, 44, 65)
HSL
hsl(210, 48%, 17%)
HSB
hsb(210, 65%, 25%)
CMYK
cmyk(65%, 32%, 0%, 75%)
Oklch
oklch(28.6% 0.047 249.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCC1A3
A3AECC

Analogous

CCADA3
CCC1A3
C3CCA3

Triadic

CCC1A3
A3CCC1
C1A3CC

Split-Comp.

CCC1A3
A3C3CC
ADA3CC

Tetradic

CCC1A3
A3CCAD
A3AECC
CCA3C3

Contrast Matrix WCAG 2.1 Contrast

CCC1A3
8A5A70
3D3145
171C32
172C41
—
3.1
AA Large
6.8
AA
9.4
AAA
8.0
AAA
3.1
AA Large
—
2.2
Fail
3.0
AA Large
2.6
Fail
6.8
AA
2.2
Fail
—
1.4
Fail
1.2
Fail
9.4
AAA
3.0
AA Large
1.4
Fail
—
1.2
Fail
8.0
AAA
2.6
Fail
1.2
Fail
1.2
Fail
—
White BG
1.8Fail
5.6AA
12.2AAA
16.8AAA
14.3AAA
Black BG
11.7AAA
3.8AA Large
1.7Fail
1.2Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C7AA
75756B
383840
19192D
20203C

Deuteranopia

C8C9AC
787C69
39393F
19192B
1F1D3B

Tritanopia

CBB0B1
886666
3C3C3C
172828
183837

Achromatopsia

C1C1C1
6B6B6B
373737
1D1D1D
282828

Shades & Tints Shades & Tints

#CCC1A3

Dark
Light

#8A5A70

Dark
Light

#3D3145

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccc1a3;
  --color-2: #8a5a70;
  --color-3: #3d3145;
  --color-4: #171c32;
  --color-5: #172c41;
}

SCSS

$color-1: #ccc1a3;
$color-2: #8a5a70;
$color-3: #3d3145;
$color-4: #171c32;
$color-5: #172c41;

TAILWIND

colors: {
  'brand-1': '#ccc1a3',
  'brand-2': '#8a5a70',
  'brand-3': '#3d3145',
  'brand-4': '#171c32',
  'brand-5': '#172c41',
}

RGB Array

[204, 193, 163], [138, 90, 112], [61, 49, 69], [23, 28, 50], [23, 44, 65]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCC1A3, #8A5A70, #3D3145, #171C32, #172C41 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ccc1a3; --color-2: #8a5a70; --color-3: #3d3145; --color-4: #171c32; --color-5: #172c41. 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 tech, SaaS, healthcare, eco industries. 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