← Back to Editor

#2E3F45 · #59487B · #82507C · #A8627E · #DFCFB5

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

#2E3F45

Slate Blue · DarkSlateGray · Peacock Green

HEX
#2E3F45
RGB
rgb(46, 63, 69)
HSL
hsl(196, 20%, 23%)
HSB
hsb(196, 33%, 27%)
CMYK
cmyk(33%, 9%, 0%, 73%)
Oklch
oklch(35.5% 0.024 221.6)

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

#59487B

Deep Indigo · DarkSlateBlue · Eggplant

HEX
#59487B
RGB
rgb(89, 72, 123)
HSL
hsl(260, 26%, 38%)
HSB
hsb(260, 41%, 48%)
CMYK
cmyk(28%, 41%, 0%, 52%)
Oklch
oklch(44.2% 0.084 298.3)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#82507C

Rose Purple · DimGray · Violet

HEX
#82507C
RGB
rgb(130, 80, 124)
HSL
hsl(307, 24%, 41%)
HSB
hsb(307, 38%, 51%)
CMYK
cmyk(0%, 38%, 5%, 49%)
Oklch
oklch(50.4% 0.091 331.2)

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

#A8627E

Dark Violet · Gray · Rose Pink

HEX
#A8627E
RGB
rgb(168, 98, 126)
HSL
hsl(336, 29%, 52%)
HSB
hsb(336, 42%, 66%)
CMYK
cmyk(0%, 42%, 25%, 34%)
Oklch
oklch(58.3% 0.097 355.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#DFCFB5

Goose Yellow · Wheat · Peach Orange

HEX
#DFCFB5
RGB
rgb(223, 207, 181)
HSL
hsl(37, 40%, 79%)
HSB
hsb(37, 19%, 87%)
CMYK
cmyk(0%, 7%, 19%, 13%)
Oklch
oklch(86.1% 0.039 80.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E3F45
46352F

Analogous

2F4641
2E3F45
2F3446

Triadic

2E3F45
462F40
40462F

Split-Comp.

2E3F45
462F34
46412F

Tetradic

2E3F45
412F46
46352F
34462F

Contrast Matrix WCAG 2.1 Contrast

2E3F45
59487B
82507C
A8627E
DFCFB5
—
1.4
Fail
1.8
Fail
2.5
Fail
7.2
AAA
1.4
Fail
—
1.3
Fail
1.8
Fail
5.2
AA
1.8
Fail
1.3
Fail
—
1.4
Fail
4.1
AA Large
2.5
Fail
1.8
Fail
1.4
Fail
—
2.9
Fail
7.2
AAA
5.2
AA
4.1
AA Large
2.9
Fail
—
White BG
11.0AAA
8.0AAA
6.2AA
4.5AA Large
1.5Fail
Black BG
1.9Fail
2.6Fail
3.4AA Large
4.7AA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

353644
52516F
6C6C71
8A8977
D8D8BB

Deuteranopia

343343
53546C
6F736F
8E9376
D9DABD

Tritanopia

2F4242
586563
806967
A57271
DEC0C1

Achromatopsia

3B3B3B
535353
646464
7A7A7A
D1D1D1

Shades & Tints Shades & Tints

#2E3F45

Dark
Light

#59487B

Dark
Light

#82507C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e3f45;
  --color-2: #59487b;
  --color-3: #82507c;
  --color-4: #a8627e;
  --color-5: #dfcfb5;
}

SCSS

$color-1: #2e3f45;
$color-2: #59487b;
$color-3: #82507c;
$color-4: #a8627e;
$color-5: #dfcfb5;

TAILWIND

colors: {
  'brand-1': '#2e3f45',
  'brand-2': '#59487b',
  'brand-3': '#82507c',
  'brand-4': '#a8627e',
  'brand-5': '#dfcfb5',
}

RGB Array

[46, 63, 69], [89, 72, 123], [130, 80, 124], [168, 98, 126], [223, 207, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2E3F45, #59487B, #82507C, #A8627E, #DFCFB5 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: #2e3f45; --color-2: #59487b; --color-3: #82507c; --color-4: #a8627e; --color-5: #dfcfb5. 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