← Back to Editor

#2F1E3A · #5F4B68 · #7E6986 · #BCC3CC · #DAD4C1

space

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

#2F1E3A

Dark Plum · DarkSlateGray · Dark Purple

HEX
#2F1E3A
RGB
rgb(47, 30, 58)
HSL
hsl(276, 32%, 17%)
HSB
hsb(276, 48%, 23%)
CMYK
cmyk(19%, 48%, 0%, 77%)
Oklch
oklch(27.0% 0.055 311.1)

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

#5F4B68

Dark Plum · DimGray · Eggplant

HEX
#5F4B68
RGB
rgb(95, 75, 104)
HSL
hsl(281, 16%, 35%)
HSB
hsb(281, 28%, 41%)
CMYK
cmyk(9%, 28%, 0%, 59%)
Oklch
oklch(44.5% 0.053 315.2)

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

#7E6986

Dark Plum · Gray · Violet

HEX
#7E6986
RGB
rgb(126, 105, 134)
HSL
hsl(283, 12%, 47%)
HSB
hsb(283, 22%, 53%)
CMYK
cmyk(6%, 22%, 0%, 47%)
Oklch
oklch(55.1% 0.051 316.6)

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

#BCC3CC

Azure · Silver · Cobalt Blue

HEX
#BCC3CC
RGB
rgb(188, 195, 204)
HSL
hsl(214, 14%, 77%)
HSB
hsb(214, 8%, 80%)
CMYK
cmyk(8%, 4%, 0%, 20%)
Oklch
oklch(81.4% 0.015 254.6)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#DAD4C1

Goose Yellow · LightGray · Lemon Cream

HEX
#DAD4C1
RGB
rgb(218, 212, 193)
HSL
hsl(46, 25%, 81%)
HSB
hsb(46, 11%, 85%)
CMYK
cmyk(0%, 3%, 11%, 15%)
Oklch
oklch(87.0% 0.026 92.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F1E3A
29391D

Analogous

201D39
2F1E3A
391D36

Triadic

2F1E3A
392E1D
1D392E

Split-Comp.

2F1E3A
36391D
1D3920

Tetradic

2F1E3A
39201D
29391D
1D3639

Contrast Matrix WCAG 2.1 Contrast

2F1E3A
5F4B68
7E6986
BCC3CC
DAD4C1
—
2.0
Fail
3.1
AA Large
8.6
AAA
10.4
AAA
2.0
Fail
—
1.6
Fail
4.4
AA Large
5.3
AA
3.1
AA Large
1.6
Fail
—
2.8
Fail
3.3
AA Large
8.6
AAA
4.4
AA Large
2.8
Fail
—
1.2
Fail
10.4
AAA
5.3
AA
3.3
AA Large
1.2
Fail
—
White BG
15.4AAA
7.8AAA
4.9AA
1.8Fail
1.5Fail
Black BG
1.4Fail
2.7Fail
4.3AA Large
11.8AAA
14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

282733
565661
75757F
BFBFCA
D7D7C6

Deuteranopia

292A32
58595F
76787D
BFBEC9
D8D8C7

Tritanopia

2E2E2D
5E5B5A
7D7978
BCC8C8
DAC9CA

Achromatopsia

262626
545454
737373
C2C2C2
D4D4D4

Shades & Tints Shades & Tints

#2F1E3A

Dark
Light

#5F4B68

Dark
Light

#7E6986

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f1e3a;
  --color-2: #5f4b68;
  --color-3: #7e6986;
  --color-4: #bcc3cc;
  --color-5: #dad4c1;
}

SCSS

$color-1: #2f1e3a;
$color-2: #5f4b68;
$color-3: #7e6986;
$color-4: #bcc3cc;
$color-5: #dad4c1;

TAILWIND

colors: {
  'brand-1': '#2f1e3a',
  'brand-2': '#5f4b68',
  'brand-3': '#7e6986',
  'brand-4': '#bcc3cc',
  'brand-5': '#dad4c1',
}

RGB Array

[47, 30, 58], [95, 75, 104], [126, 105, 134], [188, 195, 204], [218, 212, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #2F1E3A, #5F4B68, #7E6986, #BCC3CC, #DAD4C1 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: #2f1e3a; --color-2: #5f4b68; --color-3: #7e6986; --color-4: #bcc3cc; --color-5: #dad4c1. 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