← Back to Editor

#423443 · #59536F · #7580A0 · #889ABE · #A7C59F

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

#423443

Dark Plum · DarkSlateGray · Eggplant

HEX
#423443
RGB
rgb(66, 52, 67)
HSL
hsl(296, 13%, 23%)
HSB
hsb(296, 22%, 26%)
CMYK
cmyk(1%, 22%, 0%, 74%)
Oklch
oklch(34.6% 0.032 324.1)

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

#59536F

Deep Indigo · DimGray · Prussian Blue

HEX
#59536F
RGB
rgb(89, 83, 111)
HSL
hsl(253, 14%, 38%)
HSB
hsb(253, 25%, 44%)
CMYK
cmyk(20%, 25%, 0%, 56%)
Oklch
oklch(45.9% 0.046 294.4)

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

#7580A0

Azure · LightSlateGray · Navy Blue

HEX
#7580A0
RGB
rgb(117, 128, 160)
HSL
hsl(225, 18%, 54%)
HSB
hsb(225, 27%, 63%)
CMYK
cmyk(27%, 20%, 0%, 37%)
Oklch
oklch(60.3% 0.051 270.0)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#889ABE

Azure · DarkGray · Cobalt Blue

HEX
#889ABE
RGB
rgb(136, 154, 190)
HSL
hsl(220, 29%, 64%)
HSB
hsb(220, 28%, 75%)
CMYK
cmyk(28%, 19%, 0%, 25%)
Oklch
oklch(68.5% 0.057 264.1)

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

#A7C59F

Celadon · DarkGray · Apple Green

HEX
#A7C59F
RGB
rgb(167, 197, 159)
HSL
hsl(107, 25%, 70%)
HSB
hsb(107, 19%, 77%)
CMYK
cmyk(15%, 0%, 19%, 23%)
Oklch
oklch(79.1% 0.062 139.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

423443
344233

Analogous

3A3342
423443
42333C

Triadic

423443
424133
334241

Split-Comp.

423443
3C4233
33423A

Tetradic

423443
423A33
344233
333C42

Contrast Matrix WCAG 2.1 Contrast

423443
59536F
7580A0
889ABE
A7C59F
—
1.6
Fail
3.0
Fail
4.1
AA Large
6.2
AA
1.6
Fail
—
1.9
Fail
2.6
Fail
3.8
AA Large
3.0
Fail
1.9
Fail
—
1.4
Fail
2.1
Fail
4.1
AA Large
2.6
Fail
1.4
Fail
—
1.5
Fail
6.2
AA
3.8
AA Large
2.1
Fail
1.5
Fail
—
White BG
11.6AAA
7.3AAA
3.9AA Large
2.8Fail
1.9Fail
Black BG
1.8Fail
2.9Fail
5.4AA
7.4AAA
11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3C3F
565668
7A7A98
9090B5
B4B4A8

Deuteranopia

3D3E3F
575767
797896
8F8DB3
B2B0AA

Tritanopia

413D3C
596362
769291
89AEAD
A9AFB1

Achromatopsia

3A3A3A
585858
808080
999999
B8B8B8

Shades & Tints Shades & Tints

#423443

Dark
Light

#59536F

Dark
Light

#7580A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #423443;
  --color-2: #59536f;
  --color-3: #7580a0;
  --color-4: #889abe;
  --color-5: #a7c59f;
}

SCSS

$color-1: #423443;
$color-2: #59536f;
$color-3: #7580a0;
$color-4: #889abe;
$color-5: #a7c59f;

TAILWIND

colors: {
  'brand-1': '#423443',
  'brand-2': '#59536f',
  'brand-3': '#7580a0',
  'brand-4': '#889abe',
  'brand-5': '#a7c59f',
}

RGB Array

[66, 52, 67], [89, 83, 111], [117, 128, 160], [136, 154, 190], [167, 197, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #423443, #59536F, #7580A0, #889ABE, #A7C59F 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: #423443; --color-2: #59536f; --color-3: #7580a0; --color-4: #889abe; --color-5: #a7c59f. 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