← Back to Editor

#5F648C · #B2BAFF · #BDF0FC · #FFFFFF · #EBCCE3

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

#5F648C

Indigo · SlateGray · Navy Blue

HEX
#5F648C
RGB
rgb(95, 100, 140)
HSL
hsl(233, 19%, 46%)
HSB
hsb(233, 32%, 55%)
CMYK
cmyk(32%, 29%, 0%, 45%)
Oklch
oklch(51.5% 0.064 278.4)

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

#B2BAFF

Azure · LightSteelBlue · Sky Blue

HEX
#B2BAFF
RGB
rgb(178, 186, 255)
HSL
hsl(234, 100%, 85%)
HSB
hsb(234, 30%, 100%)
CMYK
cmyk(30%, 27%, 0%, 0%)
Oklch
oklch(80.8% 0.098 278.8)

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

#BDF0FC

Sky Blue · LightBlue · Glacier Blue

HEX
#BDF0FC
RGB
rgb(189, 240, 252)
HSL
hsl(191, 91%, 86%)
HSB
hsb(191, 25%, 99%)
CMYK
cmyk(25%, 5%, 0%, 1%)
Oklch
oklch(92.4% 0.054 213.7)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#EBCCE3

Mauve · LightGray · Lavender

HEX
#EBCCE3
RGB
rgb(235, 204, 227)
HSL
hsl(315, 44%, 86%)
HSB
hsb(315, 13%, 92%)
CMYK
cmyk(0%, 13%, 3%, 8%)
Oklch
oklch(87.8% 0.046 335.1)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F648C
8C865F

Analogous

5F7B8C
5F648C
705F8C

Triadic

5F648C
8C5F64
648C5F

Split-Comp.

5F648C
8C705F
7B8C5F

Tetradic

5F648C
8C5F7B
8C865F
5F8C70

Contrast Matrix WCAG 2.1 Contrast

5F648C
B2BAFF
BDF0FC
FFFFFF
EBCCE3
—
3.1
AA Large
4.6
AA
5.7
AA
3.9
AA Large
3.1
AA Large
—
1.5
Fail
1.8
Fail
1.3
Fail
4.6
AA
1.5
Fail
—
1.2
Fail
1.2
Fail
5.7
AA
1.8
Fail
1.2
Fail
—
1.5
Fail
3.9
AA Large
1.3
Fail
1.2
Fail
1.5
Fail
—
White BG
5.7AA
1.8Fail
1.2Fail
1.0Fail
1.5Fail
Black BG
3.7AA Large
11.4AAA
17.0AAA
21.0AAA
14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

616182
B5B6EE
D3D4F9
FFFFFF
DEDDDD

Deuteranopia

616180
B5B4EA
D0CCF8
FFFFFF
DFE2DC

Tritanopia

5F7B79
B2E1DE
C0F7F6
FFFFFF
E9D9D8

Achromatopsia

676767
BFBFBF
E2E2E2
FFFFFF
D8D8D8

Shades & Tints Shades & Tints

#5F648C

Dark
Light

#B2BAFF

Dark
Light

#BDF0FC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f648c;
  --color-2: #b2baff;
  --color-3: #bdf0fc;
  --color-4: #ffffff;
  --color-5: #ebcce3;
}

SCSS

$color-1: #5f648c;
$color-2: #b2baff;
$color-3: #bdf0fc;
$color-4: #ffffff;
$color-5: #ebcce3;

TAILWIND

colors: {
  'brand-1': '#5f648c',
  'brand-2': '#b2baff',
  'brand-3': '#bdf0fc',
  'brand-4': '#ffffff',
  'brand-5': '#ebcce3',
}

RGB Array

[95, 100, 140], [178, 186, 255], [189, 240, 252], [255, 255, 255], [235, 204, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F648C, #B2BAFF, #BDF0FC, #FFFFFF, #EBCCE3 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: #5f648c; --color-2: #b2baff; --color-3: #bdf0fc; --color-4: #ffffff; --color-5: #ebcce3. 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