← Back to Editor

#517699 · #D9423B · #586C70 · #B09D97

A 4-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

#517699

Slate Blue · SteelBlue · Navy Blue

HEX
#517699
RGB
rgb(81, 118, 153)
HSL
hsl(209, 31%, 46%)
HSB
hsb(209, 47%, 60%)
CMYK
cmyk(47%, 23%, 0%, 40%)
Oklch
oklch(55.2% 0.069 247.8)

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

#D9423B

Vermilion · Crimson · Passion Red

HEX
#D9423B
RGB
rgb(217, 66, 59)
HSL
hsl(3, 68%, 54%)
HSB
hsb(3, 73%, 85%)
CMYK
cmyk(0%, 70%, 73%, 15%)
Oklch
oklch(59.7% 0.189 27.2)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#586C70

Slate Blue · DimGray · Mint Ice

HEX
#586C70
RGB
rgb(88, 108, 112)
HSL
hsl(190, 12%, 39%)
HSB
hsb(190, 21%, 44%)
CMYK
cmyk(21%, 4%, 0%, 56%)
Oklch
oklch(51.6% 0.025 211.1)

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

#B09D97

Peach Pink · DarkGray · Coral Red

HEX
#B09D97
RGB
rgb(176, 157, 151)
HSL
hsl(14, 14%, 64%)
HSB
hsb(14, 14%, 69%)
CMYK
cmyk(0%, 11%, 14%, 31%)
Oklch
oklch(71.1% 0.024 38.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

517699
9A7451

Analogous

519A98
517699
51529A

Triadic

517699
9A5177
779A51

Split-Comp.

517699
9A5152
9A9851

Tetradic

517699
98519A
9A7451
529A51

Contrast Matrix WCAG 2.1 Contrast

517699
D9423B
586C70
B09D97
—
1.1
Fail
1.2
Fail
1.8
Fail
1.1
Fail
—
1.3
Fail
1.7
Fail
1.2
Fail
1.3
Fail
—
2.1
Fail
1.8
Fail
1.7
Fail
2.1
Fail
—
White BG
4.8AA
4.4AA Large
5.5AA
2.6Fail
Black BG
4.4AA Large
4.8AA
3.8AA Large
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

616191
98963D
61616F
A8A898

Deuteranopia

5F5C8F
A0AC3D
605E6F
A9AA99

Tritanopia

538A88
D13E3E
596E6E
AF9A9A

Achromatopsia

6F6F6F
6E6E6E
666666
A2A2A2

Shades & Tints Shades & Tints

#517699

Dark
Light

#D9423B

Dark
Light

#586C70

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #517699;
  --color-2: #d9423b;
  --color-3: #586c70;
  --color-4: #b09d97;
}

SCSS

$color-1: #517699;
$color-2: #d9423b;
$color-3: #586c70;
$color-4: #b09d97;

TAILWIND

colors: {
  'brand-1': '#517699',
  'brand-2': '#d9423b',
  'brand-3': '#586c70',
  'brand-4': '#b09d97',
}

RGB Array

[81, 118, 153], [217, 66, 59], [88, 108, 112], [176, 157, 151]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #517699, #D9423B, #586C70, #B09D97 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #517699; --color-2: #d9423b; --color-3: #586c70; --color-4: #b09d97. 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 4-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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