← Back to Editor

#E6E8E3 · #D7DACF · #BEC3BC · #8F9A9C · #65727A

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#E6E8E3

Willow Green · Beige · Mint Green

HEX
#E6E8E3
RGB
rgb(230, 232, 227)
HSL
hsl(84, 10%, 90%)
HSB
hsb(84, 2%, 91%)
CMYK
cmyk(1%, 0%, 2%, 9%)
Oklch
oklch(92.8% 0.007 124.5)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#D7DACF

Willow Green · LightGray · Mint Green

HEX
#D7DACF
RGB
rgb(215, 218, 207)
HSL
hsl(76, 13%, 83%)
HSB
hsb(76, 5%, 85%)
CMYK
cmyk(1%, 0%, 5%, 15%)
Oklch
oklch(88.3% 0.015 119.1)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#BEC3BC

Silver Gray · Silver · Pearl Gray

HEX
#BEC3BC
RGB
rgb(190, 195, 188)
HSL
hsl(103, 6%, 75%)
HSB
hsb(103, 4%, 76%)
CMYK
cmyk(3%, 0%, 4%, 24%)
Oklch
oklch(81.1% 0.011 136.6)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#8F9A9C

Ash · LightSlateGray · Silver Sand

HEX
#8F9A9C
RGB
rgb(143, 154, 156)
HSL
hsl(189, 6%, 59%)
HSB
hsb(189, 8%, 61%)
CMYK
cmyk(8%, 1%, 0%, 39%)
Oklch
oklch(67.8% 0.013 209.8)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#65727A

Slate Blue · DimGray · Warm Gray

HEX
#65727A
RGB
rgb(101, 114, 122)
HSL
hsl(203, 9%, 44%)
HSB
hsb(203, 17%, 48%)
CMYK
cmyk(17%, 7%, 0%, 52%)
Oklch
oklch(54.4% 0.020 234.8)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E6E8E3
E5E3E8

Analogous

E8E8E3
E6E8E3
E3E8E3

Triadic

E6E8E3
E3E6E8
E8E3E6

Split-Comp.

E6E8E3
E3E3E8
E8E3E8

Tetradic

E6E8E3
E3E8E8
E5E3E8
E8E3E3

Contrast Matrix WCAG 2.1 Contrast

E6E8E3
D7DACF
BEC3BC
8F9A9C
65727A
—
1.1
Fail
1.5
Fail
2.3
Fail
4.0
AA Large
1.1
Fail
—
1.3
Fail
2.0
Fail
3.5
AA Large
1.5
Fail
1.3
Fail
—
1.6
Fail
2.8
Fail
2.3
Fail
2.0
Fail
1.6
Fail
—
1.7
Fail
4.0
AA Large
3.5
AA Large
2.8
Fail
1.7
Fail
—
White BG
1.2Fail
1.4Fail
1.8Fail
2.9Fail
5.0AA
Black BG
17.0AAA
14.8AAA
11.7AAA
7.3AAA
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7E4
D8D8D2
C0C0BE
94949C
6B6B78

Deuteranopia

E7E7E4
D8D8D2
C0C0BE
93929B
6A6978

Tritanopia

E6E5E5
D7D4D4
BEBFBF
909B9B
667776

Achromatopsia

E7E7E7
D8D8D8
C1C1C1
979797
6F6F6F

Shades & Tints Shades & Tints

#E6E8E3

Dark
Light

#D7DACF

Dark
Light

#BEC3BC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e6e8e3;
  --color-2: #d7dacf;
  --color-3: #bec3bc;
  --color-4: #8f9a9c;
  --color-5: #65727a;
}

SCSS

$color-1: #e6e8e3;
$color-2: #d7dacf;
$color-3: #bec3bc;
$color-4: #8f9a9c;
$color-5: #65727a;

TAILWIND

colors: {
  'brand-1': '#e6e8e3',
  'brand-2': '#d7dacf',
  'brand-3': '#bec3bc',
  'brand-4': '#8f9a9c',
  'brand-5': '#65727a',
}

RGB Array

[230, 232, 227], [215, 218, 207], [190, 195, 188], [143, 154, 156], [101, 114, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #E6E8E3, #D7DACF, #BEC3BC, #8F9A9C, #65727A is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #e6e8e3; --color-2: #d7dacf; --color-3: #bec3bc; --color-4: #8f9a9c; --color-5: #65727a. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 beauty, lifestyle, arts 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