← Back to Editor

#323939 · #408F91 · #76AEB3 · #A2C3C1 · #C9D2C5

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#323939

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#323939
RGB
rgb(50, 57, 57)
HSL
hsl(180, 7%, 21%)
HSB
hsb(180, 12%, 22%)
CMYK
cmyk(12%, 0%, 0%, 78%)
Oklch
oklch(33.8% 0.009 196.7)

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

#408F91

Slate Blue · CadetBlue · Mint Ice

HEX
#408F91
RGB
rgb(64, 143, 145)
HSL
hsl(181, 39%, 41%)
HSB
hsb(181, 56%, 57%)
CMYK
cmyk(56%, 1%, 0%, 43%)
Oklch
oklch(60.2% 0.077 197.6)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#76AEB3

Slate Blue · CadetBlue · Lake Green

HEX
#76AEB3
RGB
rgb(118, 174, 179)
HSL
hsl(185, 29%, 58%)
HSB
hsb(185, 34%, 70%)
CMYK
cmyk(34%, 3%, 0%, 30%)
Oklch
oklch(71.4% 0.059 203.0)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#A2C3C1

Jade · Silver · Lake Green

HEX
#A2C3C1
RGB
rgb(162, 195, 193)
HSL
hsl(176, 22%, 70%)
HSB
hsb(176, 17%, 76%)
CMYK
cmyk(17%, 0%, 1%, 24%)
Oklch
oklch(79.2% 0.036 191.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#C9D2C5

Celadon · LightGray · Apple Green

HEX
#C9D2C5
RGB
rgb(201, 210, 197)
HSL
hsl(102, 13%, 80%)
HSB
hsb(102, 6%, 82%)
CMYK
cmyk(4%, 0%, 6%, 18%)
Oklch
oklch(85.3% 0.020 135.8)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

323939
393232

Analogous

323936
323939
323639

Triadic

323939
393239
393932

Split-Comp.

323939
393236
393632

Tetradic

323939
363239
393232
363932

Contrast Matrix WCAG 2.1 Contrast

323939
408F91
76AEB3
A2C3C1
C9D2C5
—
3.1
AA Large
4.8
AA
6.2
AA
7.6
AAA
3.1
AA Large
—
1.5
Fail
2.0
Fail
2.4
Fail
4.8
AA
1.5
Fail
—
1.3
Fail
1.6
Fail
6.2
AA
2.0
Fail
1.3
Fail
—
1.2
Fail
7.6
AAA
2.4
Fail
1.6
Fail
1.2
Fail
—
White BG
11.8AAA
3.8AA Large
2.5Fail
1.9Fail
1.6Fail
Black BG
1.8Fail
5.6AA
8.5AAA
11.1AAA
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

353539
626391
8E8FB2
B0B1C1
CDCDC8

Deuteranopia

353439
5E5890
8B87B2
AEACC2
CCCCC9

Tritanopia

323939
449090
79B1B1
A4C2C2
C9CBCB

Achromatopsia

373737
787878
9E9E9E
B9B9B9
CECECE

Shades & Tints Shades & Tints

#323939

Dark
Light

#408F91

Dark
Light

#76AEB3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #323939;
  --color-2: #408f91;
  --color-3: #76aeb3;
  --color-4: #a2c3c1;
  --color-5: #c9d2c5;
}

SCSS

$color-1: #323939;
$color-2: #408f91;
$color-3: #76aeb3;
$color-4: #a2c3c1;
$color-5: #c9d2c5;

TAILWIND

colors: {
  'brand-1': '#323939',
  'brand-2': '#408f91',
  'brand-3': '#76aeb3',
  'brand-4': '#a2c3c1',
  'brand-5': '#c9d2c5',
}

RGB Array

[50, 57, 57], [64, 143, 145], [118, 174, 179], [162, 195, 193], [201, 210, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #323939, #408F91, #76AEB3, #A2C3C1, #C9D2C5 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: #323939; --color-2: #408f91; --color-3: #76aeb3; --color-4: #a2c3c1; --color-5: #c9d2c5. 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