← Back to Editor

#51445F · #5E5363 · #666E6F · #6E897A · #569387

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 Library

Color Details Color Details

#51445F

Deep Indigo · DarkSlateGray · Eggplant

HEX
#51445F
RGB
rgb(81, 68, 95)
HSL
hsl(269, 17%, 32%)
HSB
hsb(269, 28%, 37%)
CMYK
cmyk(15%, 28%, 0%, 63%)
Oklch
oklch(41.1% 0.047 306.4)

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

#5E5363

Dark Plum · DimGray · Charcoal

HEX
#5E5363
RGB
rgb(94, 83, 99)
HSL
hsl(281, 9%, 36%)
HSB
hsb(281, 16%, 39%)
CMYK
cmyk(5%, 16%, 0%, 61%)
Oklch
oklch(45.9% 0.029 315.3)

Traditional「Dark Plum」· Paint「Charcoal」· Creative Midnight Shadow

#666E6F

Ink Gray · DimGray · Warm Gray

HEX
#666E6F
RGB
rgb(102, 110, 111)
HSL
hsl(187, 4%, 42%)
HSB
hsb(187, 8%, 44%)
CMYK
cmyk(8%, 1%, 0%, 56%)
Oklch
oklch(53.2% 0.010 205.8)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#6E897A

Celadon · Gray · Olive Green

HEX
#6E897A
RGB
rgb(110, 137, 122)
HSL
hsl(147, 11%, 48%)
HSB
hsb(147, 20%, 54%)
CMYK
cmyk(20%, 0%, 11%, 46%)
Oklch
oklch(60.5% 0.038 160.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#569387

Mineral Blue · CadetBlue · Mint Ice

HEX
#569387
RGB
rgb(86, 147, 135)
HSL
hsl(168, 26%, 46%)
HSB
hsb(168, 41%, 58%)
CMYK
cmyk(41%, 0%, 8%, 42%)
Oklch
oklch(61.8% 0.066 180.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

51445F
525F44

Analogous

44445F
51445F
5F445F

Triadic

51445F
5F5144
445F51

Split-Comp.

51445F
5F5F44
445F44

Tetradic

51445F
5F4444
525F44
445F5F

Contrast Matrix WCAG 2.1 Contrast

51445F
5E5363
666E6F
6E897A
569387
—
1.2
Fail
1.7
Fail
2.4
Fail
2.5
Fail
1.2
Fail
—
1.4
Fail
1.9
Fail
2.0
Fail
1.7
Fail
1.4
Fail
—
1.4
Fail
1.5
Fail
2.4
Fail
1.9
Fail
1.4
Fail
—
1.1
Fail
2.5
Fail
2.0
Fail
1.5
Fail
1.1
Fail
—
White BG
9.0AAA
7.3AAA
5.2AA
3.8AA Large
3.5AA Large
Black BG
2.3Fail
2.9Fail
4.0AA Large
5.5AA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B58
59595F
696A6F
7A7A7E
70718A

Deuteranopia

4C4D57
5A5B5E
69686F
78767F
6D688B

Tritanopia

505352
5D5C5B
666F6F
6F8081
598C8D

Achromatopsia

4B4B4B
585858
6C6C6C
7F7F7F
7F7F7F

Shades & Tints Shades & Tints

#51445F

Dark
Light

#5E5363

Dark
Light

#666E6F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #51445f;
  --color-2: #5e5363;
  --color-3: #666e6f;
  --color-4: #6e897a;
  --color-5: #569387;
}

SCSS

$color-1: #51445f;
$color-2: #5e5363;
$color-3: #666e6f;
$color-4: #6e897a;
$color-5: #569387;

TAILWIND

colors: {
  'brand-1': '#51445f',
  'brand-2': '#5e5363',
  'brand-3': '#666e6f',
  'brand-4': '#6e897a',
  'brand-5': '#569387',
}

RGB Array

[81, 68, 95], [94, 83, 99], [102, 110, 111], [110, 137, 122], [86, 147, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #51445F, #5E5363, #666E6F, #6E897A, #569387 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #51445f; --color-2: #5e5363; --color-3: #666e6f; --color-4: #6e897a; --color-5: #569387. 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. 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