← Back to Editor

#3C3E59 · #4B5C73 · #7FA2A2 · #ABD1AD · #DAE3BC

space

A 5-color space 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

#3C3E59

Indigo · DarkSlateGray · Prussian Blue

HEX
#3C3E59
RGB
rgb(60, 62, 89)
HSL
hsl(236, 19%, 29%)
HSB
hsb(236, 33%, 35%)
CMYK
cmyk(33%, 30%, 0%, 65%)
Oklch
oklch(37.4% 0.046 280.6)

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

#4B5C73

Indigo · DimGray · Prussian Blue

HEX
#4B5C73
RGB
rgb(75, 92, 115)
HSL
hsl(215, 21%, 37%)
HSB
hsb(215, 35%, 45%)
CMYK
cmyk(35%, 20%, 0%, 55%)
Oklch
oklch(47.0% 0.043 256.1)

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

#7FA2A2

Slate Blue · LightSlateGray · Lake Green

HEX
#7FA2A2
RGB
rgb(127, 162, 162)
HSL
hsl(180, 16%, 57%)
HSB
hsb(180, 22%, 64%)
CMYK
cmyk(22%, 0%, 0%, 36%)
Oklch
oklch(68.6% 0.038 196.3)

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

#ABD1AD

Celadon · Silver · Apple Green

HEX
#ABD1AD
RGB
rgb(171, 209, 173)
HSL
hsl(123, 29%, 75%)
HSB
hsb(123, 18%, 82%)
CMYK
cmyk(18%, 0%, 17%, 18%)
Oklch
oklch(82.3% 0.064 146.4)

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

#DAE3BC

Willow Green · LightGray · Mint Green

HEX
#DAE3BC
RGB
rgb(218, 227, 188)
HSL
hsl(74, 41%, 81%)
HSB
hsb(74, 17%, 89%)
CMYK
cmyk(4%, 0%, 17%, 11%)
Oklch
oklch(89.9% 0.053 118.0)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C3E59
58563C

Analogous

3C4C58
3C3E59
483C58

Triadic

3C3E59
583C3E
3E583C

Split-Comp.

3C3E59
58483C
4C583C

Tetradic

3C3E59
583C4C
58563C
3C5848

Contrast Matrix WCAG 2.1 Contrast

3C3E59
4B5C73
7FA2A2
ABD1AD
DAE3BC
—
1.5
Fail
3.7
AA Large
6.1
AA
7.7
AAA
1.5
Fail
—
2.5
Fail
4.0
AA Large
5.1
AA
3.7
AA Large
2.5
Fail
—
1.6
Fail
2.1
Fail
6.1
AA
4.0
AA Large
1.6
Fail
—
1.3
Fail
7.7
AAA
5.1
AA
2.1
Fail
1.3
Fail
—
White BG
10.4AAA
6.8AA
2.8Fail
1.7Fail
1.3Fail
Black BG
2.0Fail
3.1AA Large
7.6AAA
12.5AAA
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3D52
52536D
8E8EA2
BBBCB6
DEDEC5

Deuteranopia

3D3D51
51506C
8C8AA2
B9B6B8
DDDDC8

Tritanopia

3C4D4C
4C6968
81A2A2
ADBDBE
DACDCF

Achromatopsia

404040
5A5A5A
989898
C2C2C2
DCDCDC

Shades & Tints Shades & Tints

#3C3E59

Dark
Light

#4B5C73

Dark
Light

#7FA2A2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c3e59;
  --color-2: #4b5c73;
  --color-3: #7fa2a2;
  --color-4: #abd1ad;
  --color-5: #dae3bc;
}

SCSS

$color-1: #3c3e59;
$color-2: #4b5c73;
$color-3: #7fa2a2;
$color-4: #abd1ad;
$color-5: #dae3bc;

TAILWIND

colors: {
  'brand-1': '#3c3e59',
  'brand-2': '#4b5c73',
  'brand-3': '#7fa2a2',
  'brand-4': '#abd1ad',
  'brand-5': '#dae3bc',
}

RGB Array

[60, 62, 89], [75, 92, 115], [127, 162, 162], [171, 209, 173], [218, 227, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #3C3E59, #4B5C73, #7FA2A2, #ABD1AD, #DAE3BC 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: #3c3e59; --color-2: #4b5c73; --color-3: #7fa2a2; --color-4: #abd1ad; --color-5: #dae3bc. 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 space-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