← Back to Editor

#D8F2E9 · #BEBDC3 · #A4889D · #8A5377 · #701E51

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

#D8F2E9

Jade · Lavender · Mint Green

HEX
#D8F2E9
RGB
rgb(216, 242, 233)
HSL
hsl(159, 50%, 90%)
HSB
hsb(159, 11%, 95%)
CMYK
cmyk(11%, 0%, 4%, 5%)
Oklch
oklch(94.0% 0.030 172.9)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#BEBDC3

Silver Gray · Silver · Pearl Gray

HEX
#BEBDC3
RGB
rgb(190, 189, 195)
HSL
hsl(250, 5%, 75%)
HSB
hsb(250, 3%, 76%)
CMYK
cmyk(3%, 3%, 0%, 24%)
Oklch
oklch(80.1% 0.008 293.9)

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

#A4889D

Rose Purple · DarkGray · Violet

HEX
#A4889D
RGB
rgb(164, 136, 157)
HSL
hsl(315, 13%, 59%)
HSB
hsb(315, 17%, 64%)
CMYK
cmyk(0%, 17%, 4%, 36%)
Oklch
oklch(65.9% 0.045 335.0)

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

#8A5377

Rose Purple · DimGray · Camellia

HEX
#8A5377
RGB
rgb(138, 83, 119)
HSL
hsl(321, 25%, 43%)
HSB
hsb(321, 40%, 54%)
CMYK
cmyk(0%, 40%, 14%, 46%)
Oklch
oklch(51.7% 0.088 341.0)

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

#701E51

Rose Purple · Purple · Camellia

HEX
#701E51
RGB
rgb(112, 30, 81)
HSL
hsl(323, 58%, 28%)
HSB
hsb(323, 73%, 44%)
CMYK
cmyk(0%, 73%, 28%, 56%)
Oklch
oklch(38.4% 0.128 346.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8F2E9
F2D9E2

Analogous

D9F2DD
D8F2E9
D9EEF2

Triadic

D8F2E9
E9D9F2
F2E9D9

Split-Comp.

D8F2E9
F2D9EE
F2DDD9

Tetradic

D8F2E9
DDD9F2
F2D9E2
EEF2D9

Contrast Matrix WCAG 2.1 Contrast

D8F2E9
BEBDC3
A4889D
8A5377
701E51
—
1.6
Fail
2.7
Fail
5.0
AA
8.9
AAA
1.6
Fail
—
1.7
Fail
3.1
AA Large
5.6
AA
2.7
Fail
1.7
Fail
—
1.8
Fail
3.3
AA Large
5.0
AA
3.1
AA Large
1.8
Fail
—
1.8
Fail
8.9
AAA
5.6
AA
3.3
AA Large
1.8
Fail
—
White BG
1.2Fail
1.9Fail
3.2AA Large
5.9AA
10.5AAA
Black BG
17.8AAA
11.3AAA
6.6AA
3.6AA Large
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3EB
BEBEC2
989898
72726E
4C4C45

Deuteranopia

E2E0EC
BEBEC1
9A9C97
757A6C
515742

Tritanopia

D9EDED
BEC0C0
A39493
876766
6C3B39

Achromatopsia

E9E9E9
BEBEBE
939393
686868
3C3C3C

Shades & Tints Shades & Tints

#D8F2E9

Dark
Light

#BEBDC3

Dark
Light

#A4889D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8f2e9;
  --color-2: #bebdc3;
  --color-3: #a4889d;
  --color-4: #8a5377;
  --color-5: #701e51;
}

SCSS

$color-1: #d8f2e9;
$color-2: #bebdc3;
$color-3: #a4889d;
$color-4: #8a5377;
$color-5: #701e51;

TAILWIND

colors: {
  'brand-1': '#d8f2e9',
  'brand-2': '#bebdc3',
  'brand-3': '#a4889d',
  'brand-4': '#8a5377',
  'brand-5': '#701e51',
}

RGB Array

[216, 242, 233], [190, 189, 195], [164, 136, 157], [138, 83, 119], [112, 30, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8F2E9, #BEBDC3, #A4889D, #8A5377, #701E51 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: #d8f2e9; --color-2: #bebdc3; --color-3: #a4889d; --color-4: #8a5377; --color-5: #701e51. 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