← Back to Editor

#BDE1D7 · #F8F5E5 · #EFADC9 · #9088B4 · #8566A7

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

#BDE1D7

Jade · LightBlue · Glacier Blue

HEX
#BDE1D7
RGB
rgb(189, 225, 215)
HSL
hsl(163, 37%, 81%)
HSB
hsb(163, 16%, 88%)
CMYK
cmyk(16%, 0%, 4%, 12%)
Oklch
oklch(88.1% 0.040 176.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#F8F5E5

Fresh Green · Linen · Lemon Cream

HEX
#F8F5E5
RGB
rgb(248, 245, 229)
HSL
hsl(51, 58%, 94%)
HSB
hsb(51, 8%, 97%)
CMYK
cmyk(0%, 1%, 8%, 3%)
Oklch
oklch(96.8% 0.021 98.1)

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

#EFADC9

Rouge · LightPink · Cherry Blossom

HEX
#EFADC9
RGB
rgb(239, 173, 201)
HSL
hsl(335, 67%, 81%)
HSB
hsb(335, 28%, 94%)
CMYK
cmyk(0%, 28%, 16%, 6%)
Oklch
oklch(81.7% 0.085 352.0)

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

#9088B4

Wisteria · LightSlateGray · Cobalt Blue

HEX
#9088B4
RGB
rgb(144, 136, 180)
HSL
hsl(251, 23%, 62%)
HSB
hsb(251, 24%, 71%)
CMYK
cmyk(20%, 24%, 0%, 29%)
Oklch
oklch(65.0% 0.065 292.8)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#8566A7

Deep Indigo · LightSlateGray · Violet

HEX
#8566A7
RGB
rgb(133, 102, 167)
HSL
hsl(269, 27%, 53%)
HSB
hsb(269, 39%, 65%)
CMYK
cmyk(20%, 39%, 0%, 35%)
Oklch
oklch(56.7% 0.103 305.3)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BDE1D7
E0BDC7

Analogous

BDE0C4
BDE1D7
BDD9E0

Triadic

BDE1D7
D6BDE0
E0D6BD

Split-Comp.

BDE1D7
E0BDD9
E0C4BD

Tetradic

BDE1D7
C4BDE0
E0BDC7
D9E0BD

Contrast Matrix WCAG 2.1 Contrast

BDE1D7
F8F5E5
EFADC9
9088B4
8566A7
—
1.3
Fail
1.3
Fail
2.3
Fail
3.3
AA Large
1.3
Fail
—
1.7
Fail
3.0
AA Large
4.3
AA Large
1.3
Fail
1.7
Fail
—
1.8
Fail
2.6
Fail
2.3
Fail
3.0
AA Large
1.8
Fail
—
1.4
Fail
3.3
AA Large
4.3
AA Large
2.6
Fail
1.4
Fail
—
White BG
1.4Fail
1.1Fail
1.8Fail
3.3AA Large
4.7AA
Black BG
14.9AAA
19.2AAA
11.5AAA
6.4AA
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCDD9
F7F7E9
D2D2C2
8D8CA9
787797

Deuteranopia

CBC8DA
F7F7EA
D6DBC1
8D8EA7
797C94

Tritanopia

BFDBDC
F8ECED
ECBDBC
90A19F
838B88

Achromatopsia

D5D5D5
F4F4F4
C4C4C4
8F8F8F
777777

Shades & Tints Shades & Tints

#BDE1D7

Dark
Light

#F8F5E5

Dark
Light

#EFADC9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bde1d7;
  --color-2: #f8f5e5;
  --color-3: #efadc9;
  --color-4: #9088b4;
  --color-5: #8566a7;
}

SCSS

$color-1: #bde1d7;
$color-2: #f8f5e5;
$color-3: #efadc9;
$color-4: #9088b4;
$color-5: #8566a7;

TAILWIND

colors: {
  'brand-1': '#bde1d7',
  'brand-2': '#f8f5e5',
  'brand-3': '#efadc9',
  'brand-4': '#9088b4',
  'brand-5': '#8566a7',
}

RGB Array

[189, 225, 215], [248, 245, 229], [239, 173, 201], [144, 136, 180], [133, 102, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BDE1D7, #F8F5E5, #EFADC9, #9088B4, #8566A7 is ideal for: health products, baby brands, fresh-style blogs, 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: #bde1d7; --color-2: #f8f5e5; --color-3: #efadc9; --color-4: #9088b4; --color-5: #8566a7. 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 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