← Back to Editor

#514B57 · #1D9498 · #8EACB6 · #B5BCC6 · #D9D2CC

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 LibraryData Visualization

Color Details Color Details

#514B57

Ink Gray · DarkSlateGray · Charcoal

HEX
#514B57
RGB
rgb(81, 75, 87)
HSL
hsl(270, 7%, 32%)
HSB
hsb(270, 14%, 34%)
CMYK
cmyk(7%, 14%, 0%, 66%)
Oklch
oklch(42.3% 0.021 307.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#1D9498

Lake Blue · LightSeaGreen · Mint Ice

HEX
#1D9498
RGB
rgb(29, 148, 152)
HSL
hsl(182, 68%, 35%)
HSB
hsb(182, 81%, 60%)
CMYK
cmyk(81%, 3%, 0%, 40%)
Oklch
oklch(60.8% 0.097 198.5)

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

#8EACB6

Sky Blue · DarkGray · Lake Green

HEX
#8EACB6
RGB
rgb(142, 172, 182)
HSL
hsl(195, 22%, 64%)
HSB
hsb(195, 22%, 71%)
CMYK
cmyk(22%, 5%, 0%, 29%)
Oklch
oklch(72.5% 0.036 220.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#B5BCC6

Azure · Silver · Cobalt Blue

HEX
#B5BCC6
RGB
rgb(181, 188, 198)
HSL
hsl(215, 13%, 74%)
HSB
hsb(215, 9%, 78%)
CMYK
cmyk(9%, 5%, 0%, 22%)
Oklch
oklch(79.3% 0.016 257.2)

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

#D9D2CC

Apricot · LightGray · Peach Orange

HEX
#D9D2CC
RGB
rgb(217, 210, 204)
HSL
hsl(28, 15%, 83%)
HSB
hsb(28, 6%, 85%)
CMYK
cmyk(0%, 3%, 6%, 15%)
Oklch
oklch(86.8% 0.011 63.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

514B57
52574C

Analogous

4C4C57
514B57
574C57

Triadic

514B57
57524C
4C5752

Split-Comp.

514B57
57574C
4C574C

Tetradic

514B57
574C4C
52574C
4C5757

Contrast Matrix WCAG 2.1 Contrast

514B57
1D9498
8EACB6
B5BCC6
D9D2CC
—
2.3
Fail
3.5
AA Large
4.4
AA Large
5.6
AA
2.3
Fail
—
1.5
Fail
1.9
Fail
2.4
Fail
3.5
AA Large
1.5
Fail
—
1.3
Fail
1.6
Fail
4.4
AA Large
1.9
Fail
1.3
Fail
—
1.3
Fail
5.6
AA
2.4
Fail
1.6
Fail
1.3
Fail
—
White BG
8.4AAA
3.7AA Large
2.4Fail
1.9Fail
1.5Fail
Black BG
2.5Fail
5.7AA
8.7AAA
11.0AAA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E54
515297
9B9BB4
B8B8C4
D6D6CD

Deuteranopia

4F4F53
4A4197
9997B3
B8B7C3
D6D7CE

Tritanopia

515251
239696
90B2B1
B5C2C1
D9CFCF

Achromatopsia

4E4E4E
717171
A4A4A4
BBBBBB
D3D3D3

Shades & Tints Shades & Tints

#514B57

Dark
Light

#1D9498

Dark
Light

#8EACB6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #514b57;
  --color-2: #1d9498;
  --color-3: #8eacb6;
  --color-4: #b5bcc6;
  --color-5: #d9d2cc;
}

SCSS

$color-1: #514b57;
$color-2: #1d9498;
$color-3: #8eacb6;
$color-4: #b5bcc6;
$color-5: #d9d2cc;

TAILWIND

colors: {
  'brand-1': '#514b57',
  'brand-2': '#1d9498',
  'brand-3': '#8eacb6',
  'brand-4': '#b5bcc6',
  'brand-5': '#d9d2cc',
}

RGB Array

[81, 75, 87], [29, 148, 152], [142, 172, 182], [181, 188, 198], [217, 210, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #514B57, #1D9498, #8EACB6, #B5BCC6, #D9D2CC 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: #514b57; --color-2: #1d9498; --color-3: #8eacb6; --color-4: #b5bcc6; --color-5: #d9d2cc. 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