← Back to Editor

#508B87 · #4C1B2D · #60587D · #C9C5B5 · #E4EADC

dark

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

#508B87

Mineral Blue · CadetBlue · Mint Ice

HEX
#508B87
RGB
rgb(80, 139, 135)
HSL
hsl(176, 27%, 43%)
HSB
hsb(176, 42%, 55%)
CMYK
cmyk(42%, 0%, 3%, 45%)
Oklch
oklch(59.5% 0.062 190.0)

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

#4C1B2D

Dark Violet · DarkSlateGray · Raspberry

HEX
#4C1B2D
RGB
rgb(76, 27, 45)
HSL
hsl(338, 48%, 20%)
HSB
hsb(338, 64%, 30%)
CMYK
cmyk(0%, 64%, 41%, 70%)
Oklch
oklch(30.3% 0.077 359.8)

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

#60587D

Deep Indigo · DimGray · Navy Blue

HEX
#60587D
RGB
rgb(96, 88, 125)
HSL
hsl(253, 17%, 42%)
HSB
hsb(253, 30%, 49%)
CMYK
cmyk(23%, 30%, 0%, 51%)
Oklch
oklch(48.3% 0.059 294.0)

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

#C9C5B5

Goose Yellow · Silver · Sunflower

HEX
#C9C5B5
RGB
rgb(201, 197, 181)
HSL
hsl(48, 16%, 75%)
HSB
hsb(48, 10%, 79%)
CMYK
cmyk(0%, 2%, 10%, 21%)
Oklch
oklch(82.2% 0.022 95.3)

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

#E4EADC

Willow Green · Beige · Mint Green

HEX
#E4EADC
RGB
rgb(228, 234, 220)
HSL
hsl(86, 25%, 89%)
HSB
hsb(86, 6%, 92%)
CMYK
cmyk(3%, 0%, 6%, 8%)
Oklch
oklch(92.9% 0.020 125.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

508B87
8B5054

Analogous

508B6A
508B87
50728B

Triadic

508B87
87508B
8B8750

Split-Comp.

508B87
8B5072
8B6A50

Tetradic

508B87
6A508B
8B5054
728B50

Contrast Matrix WCAG 2.1 Contrast

508B87
4C1B2D
60587D
C9C5B5
E4EADC
—
3.6
AA Large
1.7
Fail
2.3
Fail
3.2
AA Large
3.6
AA Large
—
2.1
Fail
8.1
AAA
11.4
AAA
1.7
Fail
2.1
Fail
—
3.8
AA Large
5.4
AA
2.3
Fail
8.1
AAA
3.8
AA Large
—
1.4
Fail
3.2
AA Large
11.4
AAA
5.4
AA
1.4
Fail
—
White BG
3.9AA Large
14.0AAA
6.6AA
1.7Fail
1.2Fail
Black BG
5.4AA
1.5Fail
3.2AA Large
12.1AAA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A6A88
373629
5D5C74
C7C7B9
E7E7DF

Deuteranopia

666288
3A3D28
5D5E72
C8C8BA
E6E6E0

Tritanopia

538989
4A2524
606D6B
C9BCBD
E4E2E3

Achromatopsia

797979
2C2C2C
5F5F5F
C4C4C4
E7E7E7

Shades & Tints Shades & Tints

#508B87

Dark
Light

#4C1B2D

Dark
Light

#60587D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #508b87;
  --color-2: #4c1b2d;
  --color-3: #60587d;
  --color-4: #c9c5b5;
  --color-5: #e4eadc;
}

SCSS

$color-1: #508b87;
$color-2: #4c1b2d;
$color-3: #60587d;
$color-4: #c9c5b5;
$color-5: #e4eadc;

TAILWIND

colors: {
  'brand-1': '#508b87',
  'brand-2': '#4c1b2d',
  'brand-3': '#60587d',
  'brand-4': '#c9c5b5',
  'brand-5': '#e4eadc',
}

RGB Array

[80, 139, 135], [76, 27, 45], [96, 88, 125], [201, 197, 181], [228, 234, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #508B87, #4C1B2D, #60587D, #C9C5B5, #E4EADC 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: #508b87; --color-2: #4c1b2d; --color-3: #60587d; --color-4: #c9c5b5; --color-5: #e4eadc. 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 dark-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