← Back to Editor

#E8EDE6 · #D6D6B8 · #9AD8B1 · #5BB7BE · #51434A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#E8EDE6

Celadon · Beige · Mint Green

HEX
#E8EDE6
RGB
rgb(232, 237, 230)
HSL
hsl(103, 16%, 92%)
HSB
hsb(103, 3%, 93%)
CMYK
cmyk(2%, 0%, 3%, 7%)
Oklch
oklch(94.0% 0.011 136.6)

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

#D6D6B8

Fresh Green · LightGray · Lemon Cream

HEX
#D6D6B8
RGB
rgb(214, 214, 184)
HSL
hsl(60, 27%, 78%)
HSB
hsb(60, 14%, 84%)
CMYK
cmyk(0%, 0%, 14%, 16%)
Oklch
oklch(86.8% 0.040 107.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#9AD8B1

Celadon · LightGreen · Apple Green

HEX
#9AD8B1
RGB
rgb(154, 216, 177)
HSL
hsl(142, 44%, 73%)
HSB
hsb(142, 29%, 85%)
CMYK
cmyk(29%, 0%, 18%, 15%)
Oklch
oklch(82.9% 0.084 156.5)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#5BB7BE

Slate Blue · MediumAquaMarine · Lake Green

HEX
#5BB7BE
RGB
rgb(91, 183, 190)
HSL
hsl(184, 43%, 55%)
HSB
hsb(184, 52%, 75%)
CMYK
cmyk(52%, 4%, 0%, 25%)
Oklch
oklch(72.6% 0.088 202.0)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#51434A

Dark Violet · DarkSlateGray · Charcoal

HEX
#51434A
RGB
rgb(81, 67, 74)
HSL
hsl(330, 9%, 29%)
HSB
hsb(330, 17%, 32%)
CMYK
cmyk(0%, 17%, 9%, 68%)
Oklch
oklch(40.0% 0.022 346.5)

Traditional「Dark Violet」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8EDE6
ECE7EE

Analogous

ECEEE7
E8EDE6
E7EEE9

Triadic

E8EDE6
E7E9EE
EEE7E9

Split-Comp.

E8EDE6
E9E7EE
EEE7EC

Tetradic

E8EDE6
E7ECEE
ECE7EE
EEE9E7

Contrast Matrix WCAG 2.1 Contrast

E8EDE6
D6D6B8
9AD8B1
5BB7BE
51434A
—
1.2
Fail
1.4
Fail
2.0
Fail
7.9
AAA
1.2
Fail
—
1.1
Fail
1.6
Fail
6.3
AA
1.4
Fail
1.1
Fail
—
1.4
Fail
5.7
AA
2.0
Fail
1.6
Fail
1.4
Fail
—
4.0
AA Large
7.9
AAA
6.3
AA
5.7
AA
4.0
AA Large
—
White BG
1.2Fail
1.5Fail
1.6Fail
2.3Fail
9.3AAA
Black BG
17.7AAA
14.2AAA
12.8AAA
9.0AAA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAE8
D6D6BF
B5B5BA
8384BC
4B4B48

Deuteranopia

EAE9E8
D6D6C1
B1ADBD
7E77BC
4C4D48

Tritanopia

E8E9E9
D6C5C6
9DC2C4
60BBBB
504747

Achromatopsia

EBEBEB
D3D3D3
C1C1C1
9C9C9C
484848

Shades & Tints Shades & Tints

#E8EDE6

Dark
Light

#D6D6B8

Dark
Light

#9AD8B1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8ede6;
  --color-2: #d6d6b8;
  --color-3: #9ad8b1;
  --color-4: #5bb7be;
  --color-5: #51434a;
}

SCSS

$color-1: #e8ede6;
$color-2: #d6d6b8;
$color-3: #9ad8b1;
$color-4: #5bb7be;
$color-5: #51434a;

TAILWIND

colors: {
  'brand-1': '#e8ede6',
  'brand-2': '#d6d6b8',
  'brand-3': '#9ad8b1',
  'brand-4': '#5bb7be',
  'brand-5': '#51434a',
}

RGB Array

[232, 237, 230], [214, 214, 184], [154, 216, 177], [91, 183, 190], [81, 67, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E8EDE6, #D6D6B8, #9AD8B1, #5BB7BE, #51434A 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: #e8ede6; --color-2: #d6d6b8; --color-3: #9ad8b1; --color-4: #5bb7be; --color-5: #51434a. 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 general-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