← Back to Editor

#455B70 · #5E7583 · #718A8E · #879C97 · #D3D0A5

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 Library

Color Details Color Details

#455B70

Slate Blue · DimGray · Prussian Blue

HEX
#455B70
RGB
rgb(69, 91, 112)
HSL
hsl(209, 24%, 35%)
HSB
hsb(209, 38%, 44%)
CMYK
cmyk(38%, 19%, 0%, 56%)
Oklch
oklch(46.2% 0.044 247.6)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#5E7583

Slate Blue · SlateGray · Navy Blue

HEX
#5E7583
RGB
rgb(94, 117, 131)
HSL
hsl(203, 16%, 44%)
HSB
hsb(203, 28%, 51%)
CMYK
cmyk(28%, 11%, 0%, 49%)
Oklch
oklch(54.9% 0.035 235.0)

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

#718A8E

Slate Blue · SlateGray · Mint Ice

HEX
#718A8E
RGB
rgb(113, 138, 142)
HSL
hsl(188, 11%, 50%)
HSB
hsb(188, 20%, 56%)
CMYK
cmyk(20%, 3%, 0%, 44%)
Oklch
oklch(61.5% 0.029 208.3)

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

#879C97

Mineral Blue · LightSlateGray · Lake Green

HEX
#879C97
RGB
rgb(135, 156, 151)
HSL
hsl(166, 10%, 57%)
HSB
hsb(166, 13%, 61%)
CMYK
cmyk(13%, 0%, 3%, 39%)
Oklch
oklch(67.5% 0.025 179.6)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#D3D0A5

Fresh Green · Silver · Sunflower

HEX
#D3D0A5
RGB
rgb(211, 208, 165)
HSL
hsl(56, 34%, 74%)
HSB
hsb(56, 22%, 83%)
CMYK
cmyk(0%, 1%, 22%, 17%)
Oklch
oklch(84.9% 0.057 104.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

455B70
6F5944

Analogous

446F6E
455B70
44456F

Triadic

455B70
6F445A
5A6F44

Split-Comp.

455B70
6F4445
6F6E44

Tetradic

455B70
6E446F
6F5944
456F44

Contrast Matrix WCAG 2.1 Contrast

455B70
5E7583
718A8E
879C97
D3D0A5
—
1.5
Fail
1.9
Fail
2.4
Fail
4.5
AA Large
1.5
Fail
—
1.3
Fail
1.7
Fail
3.1
AA Large
1.9
Fail
1.3
Fail
—
1.3
Fail
2.3
Fail
2.4
Fail
1.7
Fail
1.3
Fail
—
1.8
Fail
4.5
AA Large
3.1
AA Large
2.3
Fail
1.8
Fail
—
White BG
7.0AAA
4.8AA
3.7AA Large
2.9Fail
1.6Fail
Black BG
3.0Fail
4.3AA Large
5.7AA
7.2AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4F6B
686880
7C7C8D
909098
D2D2AF

Deuteranopia

4D4C6A
67657F
7A798D
8F8D99
D2D2B2

Tritanopia

466766
5F7D7C
728C8C
889999
D3B8B9

Achromatopsia

575757
707070
838383
959595
CCCCCC

Shades & Tints Shades & Tints

#455B70

Dark
Light

#5E7583

Dark
Light

#718A8E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #455b70;
  --color-2: #5e7583;
  --color-3: #718a8e;
  --color-4: #879c97;
  --color-5: #d3d0a5;
}

SCSS

$color-1: #455b70;
$color-2: #5e7583;
$color-3: #718a8e;
$color-4: #879c97;
$color-5: #d3d0a5;

TAILWIND

colors: {
  'brand-1': '#455b70',
  'brand-2': '#5e7583',
  'brand-3': '#718a8e',
  'brand-4': '#879c97',
  'brand-5': '#d3d0a5',
}

RGB Array

[69, 91, 112], [94, 117, 131], [113, 138, 142], [135, 156, 151], [211, 208, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #455B70, #5E7583, #718A8E, #879C97, #D3D0A5 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: #455b70; --color-2: #5e7583; --color-3: #718a8e; --color-4: #879c97; --color-5: #d3d0a5. 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