← Back to Editor

#584558 · #796E7E · #8CA2B7 · #D1AFC0 · #EFC2D7

pastel

A 5-color pastel palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#584558

Rose Purple · DarkSlateGray · Eggplant

HEX
#584558
RGB
rgb(88, 69, 88)
HSL
hsl(300, 12%, 31%)
HSB
hsb(300, 22%, 35%)
CMYK
cmyk(0%, 22%, 0%, 65%)
Oklch
oklch(41.7% 0.040 326.3)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#796E7E

Ink Gray · Gray · Warm Gray

HEX
#796E7E
RGB
rgb(121, 110, 126)
HSL
hsl(281, 7%, 46%)
HSB
hsb(281, 13%, 49%)
CMYK
cmyk(4%, 13%, 0%, 51%)
Oklch
oklch(55.4% 0.028 315.4)

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

#8CA2B7

Sky Blue · DarkGray · Cobalt Blue

HEX
#8CA2B7
RGB
rgb(140, 162, 183)
HSL
hsl(209, 23%, 63%)
HSB
hsb(209, 23%, 72%)
CMYK
cmyk(23%, 11%, 0%, 28%)
Oklch
oklch(70.2% 0.040 247.2)

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

#D1AFC0

Rouge · Silver · Rose Pink

HEX
#D1AFC0
RGB
rgb(209, 175, 192)
HSL
hsl(330, 27%, 75%)
HSB
hsb(330, 16%, 82%)
CMYK
cmyk(0%, 16%, 8%, 18%)
Oklch
oklch(78.9% 0.045 346.6)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#EFC2D7

Rouge · Pink · Cherry Blossom

HEX
#EFC2D7
RGB
rgb(239, 194, 215)
HSL
hsl(332, 58%, 85%)
HSB
hsb(332, 19%, 94%)
CMYK
cmyk(0%, 19%, 10%, 6%)
Oklch
oklch(85.9% 0.058 348.6)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

584558
465946

Analogous

4F4659
584558
59464F

Triadic

584558
595946
465959

Split-Comp.

584558
4F5946
46594F

Tetradic

584558
594F46
465946
464F59

Contrast Matrix WCAG 2.1 Contrast

584558
796E7E
8CA2B7
D1AFC0
EFC2D7
—
1.8
Fail
3.3
AA Large
4.4
AA Large
5.6
AA
1.8
Fail
—
1.8
Fail
2.4
Fail
3.1
AA Large
3.3
AA Large
1.8
Fail
—
1.3
Fail
1.7
Fail
4.4
AA Large
2.4
Fail
1.3
Fail
—
1.3
Fail
5.6
AA
3.1
AA Large
1.7
Fail
1.3
Fail
—
White BG
8.7AAA
4.8AA
2.6Fail
2.0Fail
1.6Fail
Black BG
2.4Fail
4.3AA Large
8.0AAA
10.6AAA
13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

505053
74747A
9696B2
C2C2BC
DCDBD2

Deuteranopia

515252
757679
9493B1
C4C7BB
DEE1D1

Tritanopia

57504F
787776
8DAEAD
CFB9B8
EDCECD

Achromatopsia

4D4D4D
737373
9E9E9E
BBBBBB
D2D2D2

Shades & Tints Shades & Tints

#584558

Dark
Light

#796E7E

Dark
Light

#8CA2B7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #584558;
  --color-2: #796e7e;
  --color-3: #8ca2b7;
  --color-4: #d1afc0;
  --color-5: #efc2d7;
}

SCSS

$color-1: #584558;
$color-2: #796e7e;
$color-3: #8ca2b7;
$color-4: #d1afc0;
$color-5: #efc2d7;

TAILWIND

colors: {
  'brand-1': '#584558',
  'brand-2': '#796e7e',
  'brand-3': '#8ca2b7',
  'brand-4': '#d1afc0',
  'brand-5': '#efc2d7',
}

RGB Array

[88, 69, 88], [121, 110, 126], [140, 162, 183], [209, 175, 192], [239, 194, 215]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #584558, #796E7E, #8CA2B7, #D1AFC0, #EFC2D7 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: #584558; --color-2: #796e7e; --color-3: #8ca2b7; --color-4: #d1afc0; --color-5: #efc2d7. 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 pastel-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