← Back to Editor

#E9F1F2 · #BDC8D8 · #918FB3 · #685C82 · #9D65A4

space

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#E9F1F2

Sky Blue · Lavender · Glacier Blue

HEX
#E9F1F2
RGB
rgb(233, 241, 242)
HSL
hsl(187, 26%, 93%)
HSB
hsb(187, 4%, 95%)
CMYK
cmyk(4%, 0%, 0%, 5%)
Oklch
oklch(95.2% 0.009 205.9)

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

#BDC8D8

Azure · LightSteelBlue · Cobalt Blue

HEX
#BDC8D8
RGB
rgb(189, 200, 216)
HSL
hsl(216, 26%, 79%)
HSB
hsb(216, 12%, 85%)
CMYK
cmyk(12%, 7%, 0%, 15%)
Oklch
oklch(82.9% 0.025 257.7)

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

#918FB3

Wisteria · DarkGray · Cobalt Blue

HEX
#918FB3
RGB
rgb(145, 143, 179)
HSL
hsl(243, 19%, 63%)
HSB
hsb(243, 20%, 70%)
CMYK
cmyk(19%, 20%, 0%, 30%)
Oklch
oklch(66.4% 0.053 287.4)

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

#685C82

Deep Indigo · DimGray · Navy Blue

HEX
#685C82
RGB
rgb(104, 92, 130)
HSL
hsl(259, 17%, 44%)
HSB
hsb(259, 29%, 51%)
CMYK
cmyk(20%, 29%, 0%, 49%)
Oklch
oklch(50.1% 0.061 298.7)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#9D65A4

Dark Plum · LightSlateGray · Violet

HEX
#9D65A4
RGB
rgb(157, 101, 164)
HSL
hsl(293, 26%, 52%)
HSB
hsb(293, 38%, 64%)
CMYK
cmyk(4%, 38%, 0%, 36%)
Oklch
oklch(59.0% 0.113 322.9)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E9F1F2
F2EAE9

Analogous

E9F2EE
E9F1F2
E9ECF2

Triadic

E9F1F2
F2E9F1
F1F2E9

Split-Comp.

E9F1F2
F2E9EC
F2EEE9

Tetradic

E9F1F2
EEE9F2
F2EAE9
ECF2E9

Contrast Matrix WCAG 2.1 Contrast

E9F1F2
BDC8D8
918FB3
685C82
9D65A4
—
1.5
Fail
2.7
Fail
5.3
AA
3.8
AA Large
1.5
Fail
—
1.8
Fail
3.6
AA Large
2.6
Fail
2.7
Fail
1.8
Fail
—
2.0
Fail
1.4
Fail
5.3
AA
3.6
AA Large
2.0
Fail
—
1.4
Fail
3.8
AA Large
2.6
Fail
1.4
Fail
1.4
Fail
—
White BG
1.1Fail
1.7Fail
3.1AA Large
6.1AA
4.3AA Large
Black BG
18.3AAA
12.4AAA
6.8AA
3.4AA Large
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECEDF2
C2C2D4
9090AA
636379
858495

Deuteranopia

ECEBF2
C1C0D3
9090A8
646477
888C91

Tritanopia

E9F2F2
BED1D0
91A3A2
677270
9A8986

Achromatopsia

EFEFEF
C7C7C7
949494
646464
7D7D7D

Shades & Tints Shades & Tints

#E9F1F2

Dark
Light

#BDC8D8

Dark
Light

#918FB3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e9f1f2;
  --color-2: #bdc8d8;
  --color-3: #918fb3;
  --color-4: #685c82;
  --color-5: #9d65a4;
}

SCSS

$color-1: #e9f1f2;
$color-2: #bdc8d8;
$color-3: #918fb3;
$color-4: #685c82;
$color-5: #9d65a4;

TAILWIND

colors: {
  'brand-1': '#e9f1f2',
  'brand-2': '#bdc8d8',
  'brand-3': '#918fb3',
  'brand-4': '#685c82',
  'brand-5': '#9d65a4',
}

RGB Array

[233, 241, 242], [189, 200, 216], [145, 143, 179], [104, 92, 130], [157, 101, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #E9F1F2, #BDC8D8, #918FB3, #685C82, #9D65A4 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: #e9f1f2; --color-2: #bdc8d8; --color-3: #918fb3; --color-4: #685c82; --color-5: #9d65a4. 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 space-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