← Back to Editor

#B7B4E0 · #E5E0E2 · #020618 · #E3E3F3 · #C2C2C7

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

#B7B4E0

Wisteria · LightSteelBlue · Cobalt Blue

HEX
#B7B4E0
RGB
rgb(183, 180, 224)
HSL
hsl(244, 42%, 79%)
HSB
hsb(244, 20%, 88%)
CMYK
cmyk(18%, 20%, 0%, 12%)
Oklch
oklch(78.7% 0.062 288.0)

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

#E5E0E2

Rouge · Lavender · Cloud White

HEX
#E5E0E2
RGB
rgb(229, 224, 226)
HSL
hsl(336, 9%, 89%)
HSB
hsb(336, 2%, 90%)
CMYK
cmyk(0%, 2%, 1%, 10%)
Oklch
oklch(91.1% 0.006 350.8)

Traditional「Rouge」· Paint「Cloud White」· Creative Silver Lining

#020618

Indigo · Black · Deep Sea Blue

HEX
#020618
RGB
rgb(2, 6, 24)
HSL
hsl(229, 85%, 5%)
HSB
hsb(229, 92%, 9%)
CMYK
cmyk(92%, 75%, 0%, 91%)
Oklch
oklch(13.0% 0.043 265.1)

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

#E3E3F3

Wisteria · Lavender · Sky Blue

HEX
#E3E3F3
RGB
rgb(227, 227, 243)
HSL
hsl(240, 40%, 92%)
HSB
hsb(240, 7%, 95%)
CMYK
cmyk(7%, 7%, 0%, 5%)
Oklch
oklch(92.1% 0.022 286.0)

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

#C2C2C7

Silver Gray · Silver · Pearl Gray

HEX
#C2C2C7
RGB
rgb(194, 194, 199)
HSL
hsl(240, 4%, 77%)
HSB
hsb(240, 3%, 78%)
CMYK
cmyk(3%, 3%, 0%, 22%)
Oklch
oklch(81.6% 0.007 286.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7B4E0
DDE0B3

Analogous

B3C6E0
B7B4E0
CCB3E0

Triadic

B7B4E0
E0B6B3
B3E0B6

Split-Comp.

B7B4E0
E0CCB3
C6E0B3

Tetradic

B7B4E0
E0B3C6
DDE0B3
B3E0CC

Contrast Matrix WCAG 2.1 Contrast

B7B4E0
E5E0E2
020618
E3E3F3
C2C2C7
—
1.5
Fail
10.2
AAA
1.6
Fail
1.1
Fail
1.5
Fail
—
15.4
AAA
1.0
Fail
1.4
Fail
10.2
AAA
15.4
AAA
—
15.9
AAA
11.4
AAA
1.6
Fail
1.0
Fail
15.9
AAA
—
1.4
Fail
1.1
Fail
1.4
Fail
11.4
AAA
1.4
Fail
—
White BG
2.0Fail
1.3Fail
20.2AAA
1.3Fail
1.8Fail
Black BG
10.6AAA
16.1AAA
1.0Fail
16.5AAA
11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B6D5
E3E3E2
040414
E3E3EF
C2C2C6

Deuteranopia

B6B6D3
E3E4E1
040313
E3E3EE
C2C2C5

Tritanopia

B7CDCB
E5E1E1
02100F
E3ECEB
C2C5C5

Achromatopsia

BABABA
E2E2E2
070707
E5E5E5
C3C3C3

Shades & Tints Shades & Tints

#B7B4E0

Dark
Light

#E5E0E2

Dark
Light

#020618

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7b4e0;
  --color-2: #e5e0e2;
  --color-3: #020618;
  --color-4: #e3e3f3;
  --color-5: #c2c2c7;
}

SCSS

$color-1: #b7b4e0;
$color-2: #e5e0e2;
$color-3: #020618;
$color-4: #e3e3f3;
$color-5: #c2c2c7;

TAILWIND

colors: {
  'brand-1': '#b7b4e0',
  'brand-2': '#e5e0e2',
  'brand-3': '#020618',
  'brand-4': '#e3e3f3',
  'brand-5': '#c2c2c7',
}

RGB Array

[183, 180, 224], [229, 224, 226], [2, 6, 24], [227, 227, 243], [194, 194, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7B4E0, #E5E0E2, #020618, #E3E3F3, #C2C2C7 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: #b7b4e0; --color-2: #e5e0e2; --color-3: #020618; --color-4: #e3e3f3; --color-5: #c2c2c7. 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