← Back to Editor

#E1E2E3 · #B0BDC6 · #929DAA · #677689 · #545E69

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E1E2E3

Plain White · Lavender · Cloud White

HEX
#E1E2E3
RGB
rgb(225, 226, 227)
HSL
hsl(210, 3%, 89%)
HSB
hsb(210, 1%, 89%)
CMYK
cmyk(1%, 0%, 0%, 11%)
Oklch
oklch(91.2% 0.002 247.8)

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

#B0BDC6

Sky Blue · Silver · Cobalt Blue

HEX
#B0BDC6
RGB
rgb(176, 189, 198)
HSL
hsl(205, 16%, 73%)
HSB
hsb(205, 11%, 78%)
CMYK
cmyk(11%, 5%, 0%, 22%)
Oklch
oklch(79.1% 0.019 237.8)

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

#929DAA

Azure · DarkGray · Cobalt Blue

HEX
#929DAA
RGB
rgb(146, 157, 170)
HSL
hsl(212, 12%, 62%)
HSB
hsb(212, 14%, 67%)
CMYK
cmyk(14%, 8%, 0%, 33%)
Oklch
oklch(69.1% 0.023 252.6)

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

#677689

Indigo · SlateGray · Navy Blue

HEX
#677689
RGB
rgb(103, 118, 137)
HSL
hsl(214, 14%, 47%)
HSB
hsb(214, 25%, 54%)
CMYK
cmyk(25%, 14%, 0%, 46%)
Oklch
oklch(56.0% 0.035 254.4)

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

#545E69

Indigo · DimGray · Prussian Blue

HEX
#545E69
RGB
rgb(84, 94, 105)
HSL
hsl(211, 11%, 37%)
HSB
hsb(211, 20%, 41%)
CMYK
cmyk(20%, 10%, 0%, 59%)
Oklch
oklch(47.7% 0.022 250.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E1E2E3
E4E3E2

Analogous

E2E4E4
E1E2E3
E2E2E4

Triadic

E1E2E3
E4E2E3
E3E4E2

Split-Comp.

E1E2E3
E4E2E2
E4E4E2

Tetradic

E1E2E3
E4E2E4
E4E3E2
E2E4E2

Contrast Matrix WCAG 2.1 Contrast

E1E2E3
B0BDC6
929DAA
677689
545E69
—
1.5
Fail
2.1
Fail
3.6
AA Large
5.1
AA
1.5
Fail
—
1.4
Fail
2.4
Fail
3.4
AA Large
2.1
Fail
1.4
Fail
—
1.7
Fail
2.4
Fail
3.6
AA Large
2.4
Fail
1.7
Fail
—
1.4
Fail
5.1
AA
3.4
AA Large
2.4
Fail
1.4
Fail
—
White BG
1.3Fail
1.9Fail
2.8Fail
4.6AA
6.6AA
Black BG
16.2AAA
10.9AAA
7.6AAA
4.5AA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E1E3
B6B6C4
9797A7
6D6E84
585866

Deuteranopia

E1E1E3
B5B4C3
9695A6
6D6C83
585766

Tritanopia

E1E3E3
B1C2C2
93A4A4
688180
556464

Achromatopsia

E2E2E2
BABABA
9B9B9B
747474
5C5C5C

Shades & Tints Shades & Tints

#E1E2E3

Dark
Light

#B0BDC6

Dark
Light

#929DAA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e1e2e3;
  --color-2: #b0bdc6;
  --color-3: #929daa;
  --color-4: #677689;
  --color-5: #545e69;
}

SCSS

$color-1: #e1e2e3;
$color-2: #b0bdc6;
$color-3: #929daa;
$color-4: #677689;
$color-5: #545e69;

TAILWIND

colors: {
  'brand-1': '#e1e2e3',
  'brand-2': '#b0bdc6',
  'brand-3': '#929daa',
  'brand-4': '#677689',
  'brand-5': '#545e69',
}

RGB Array

[225, 226, 227], [176, 189, 198], [146, 157, 170], [103, 118, 137], [84, 94, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E1E2E3, #B0BDC6, #929DAA, #677689, #545E69 is ideal for: brand design, premium product pages, magazine layouts, 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: #e1e2e3; --color-2: #b0bdc6; --color-3: #929daa; --color-4: #677689; --color-5: #545e69. 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. 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