← Back to Editor

#217E76 · #55867D · #8A8D84 · #BE958A · #F29C91

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

#217E76

Mineral Blue · Teal · Mint Ice

HEX
#217E76
RGB
rgb(33, 126, 118)
HSL
hsl(175, 58%, 31%)
HSB
hsb(175, 74%, 49%)
CMYK
cmyk(74%, 0%, 6%, 51%)
Oklch
oklch(53.9% 0.085 186.5)

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

#55867D

Mineral Blue · SlateGray · Mint Ice

HEX
#55867D
RGB
rgb(85, 134, 125)
HSL
hsl(169, 22%, 43%)
HSB
hsb(169, 37%, 53%)
CMYK
cmyk(37%, 0%, 7%, 47%)
Oklch
oklch(58.2% 0.055 181.4)

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

#8A8D84

Ash · Gray · Warm Gray

HEX
#8A8D84
RGB
rgb(138, 141, 132)
HSL
hsl(80, 4%, 54%)
HSB
hsb(80, 6%, 55%)
CMYK
cmyk(2%, 0%, 6%, 45%)
Oklch
oklch(63.8% 0.014 121.8)

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

#BE958A

Peach Pink · Tan · Coral Red

HEX
#BE958A
RGB
rgb(190, 149, 138)
HSL
hsl(13, 29%, 64%)
HSB
hsb(13, 27%, 75%)
CMYK
cmyk(0%, 22%, 27%, 25%)
Oklch
oklch(70.5% 0.052 35.5)

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

#F29C91

Peach Pink · DarkSalmon · Coral Red

HEX
#F29C91
RGB
rgb(242, 156, 145)
HSL
hsl(7, 79%, 76%)
HSB
hsb(7, 40%, 95%)
CMYK
cmyk(0%, 36%, 40%, 5%)
Oklch
oklch(77.6% 0.105 27.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

217E76
7D2129

Analogous

217D47
217E76
21577D

Triadic

217E76
75217D
7D7521

Split-Comp.

217E76
7D2157
7D4721

Tetradic

217E76
47217D
7D2129
577D21

Contrast Matrix WCAG 2.1 Contrast

217E76
55867D
8A8D84
BE958A
F29C91
—
1.2
Fail
1.4
Fail
1.8
Fail
2.3
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
2.0
Fail
1.4
Fail
1.2
Fail
—
1.3
Fail
1.6
Fail
1.8
Fail
1.5
Fail
1.3
Fail
—
1.3
Fail
2.3
Fail
2.0
Fail
1.6
Fail
1.3
Fail
—
White BG
4.9AA
4.1AA Large
3.4AA Large
2.7Fail
2.1Fail
Black BG
4.3AA Large
5.1AA
6.2AA
7.9AAA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

494A78
6A6B7F
8B8B86
ACAC8D
CDCC94

Deuteranopia

443D78
676480
8B8B87
AFB28D
D2D894

Tritanopia

26797A
578181
8A8888
BC8F8F
EE9696

Achromatopsia

616161
767676
8B8B8B
A0A0A0
B4B4B4

Shades & Tints Shades & Tints

#217E76

Dark
Light

#55867D

Dark
Light

#8A8D84

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #217e76;
  --color-2: #55867d;
  --color-3: #8a8d84;
  --color-4: #be958a;
  --color-5: #f29c91;
}

SCSS

$color-1: #217e76;
$color-2: #55867d;
$color-3: #8a8d84;
$color-4: #be958a;
$color-5: #f29c91;

TAILWIND

colors: {
  'brand-1': '#217e76',
  'brand-2': '#55867d',
  'brand-3': '#8a8d84',
  'brand-4': '#be958a',
  'brand-5': '#f29c91',
}

RGB Array

[33, 126, 118], [85, 134, 125], [138, 141, 132], [190, 149, 138], [242, 156, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #217E76, #55867D, #8A8D84, #BE958A, #F29C91 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #217e76; --color-2: #55867d; --color-3: #8a8d84; --color-4: #be958a; --color-5: #f29c91. 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. 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