← Back to Editor

#3E6582 · #558B9E · #8FB0B8 · #D8E1E3 · #F2F2F2

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

#3E6582

Slate Blue · DarkSlateBlue · Prussian Blue

HEX
#3E6582
RGB
rgb(62, 101, 130)
HSL
hsl(206, 35%, 38%)
HSB
hsb(206, 52%, 51%)
CMYK
cmyk(52%, 22%, 0%, 49%)
Oklch
oklch(49.0% 0.064 241.9)

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

#558B9E

Slate Blue · CadetBlue · Mint Ice

HEX
#558B9E
RGB
rgb(85, 139, 158)
HSL
hsl(196, 30%, 48%)
HSB
hsb(196, 46%, 62%)
CMYK
cmyk(46%, 12%, 0%, 38%)
Oklch
oklch(60.6% 0.064 222.5)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#8FB0B8

Sky Blue · DarkGray · Lake Green

HEX
#8FB0B8
RGB
rgb(143, 176, 184)
HSL
hsl(192, 22%, 64%)
HSB
hsb(192, 22%, 72%)
CMYK
cmyk(22%, 4%, 0%, 28%)
Oklch
oklch(73.5% 0.038 214.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#D8E1E3

Sky Blue · LightGray · Glacier Blue

HEX
#D8E1E3
RGB
rgb(216, 225, 227)
HSL
hsl(191, 16%, 87%)
HSB
hsb(191, 5%, 89%)
CMYK
cmyk(5%, 1%, 0%, 11%)
Oklch
oklch(90.3% 0.010 212.5)

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

#F2F2F2

Plain White · SeaShell · Cloud White

HEX
#F2F2F2
RGB
rgb(242, 242, 242)
HSL
hsl(0, 0%, 95%)
HSB
hsb(0, 0%, 95%)
CMYK
cmyk(0%, 0%, 0%, 5%)
Oklch
oklch(96.1% 0.000 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3E6582
835C3F

Analogous

3F837E
3E6582
3F4483

Triadic

3E6582
833F65
65833F

Split-Comp.

3E6582
833F44
837E3F

Tetradic

3E6582
7E3F83
835C3F
44833F

Contrast Matrix WCAG 2.1 Contrast

3E6582
558B9E
8FB0B8
D8E1E3
F2F2F2
—
1.6
Fail
2.7
Fail
4.7
AA
5.5
AA
1.6
Fail
—
1.6
Fail
2.8
Fail
3.4
AA Large
2.7
Fail
1.6
Fail
—
1.7
Fail
2.1
Fail
4.7
AA
2.8
Fail
1.7
Fail
—
1.2
Fail
5.5
AA
3.4
AA Large
2.1
Fail
1.2
Fail
—
White BG
6.2AA
3.8AA Large
2.3Fail
1.3Fail
1.1Fail
Black BG
3.4AA Large
5.6AA
9.1AAA
15.8AAA
18.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4F7B
6C6D99
9D9EB6
DCDCE3
F2F2F2

Deuteranopia

4D4A79
696598
9B99B6
DBDBE2
F2F2F2

Tritanopia

407574
589695
91B5B4
D8E2E2
F2F2F2

Achromatopsia

5D5D5D
7D7D7D
A7A7A7
DFDFDF
F2F2F2

Shades & Tints Shades & Tints

#3E6582

Dark
Light

#558B9E

Dark
Light

#8FB0B8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3e6582;
  --color-2: #558b9e;
  --color-3: #8fb0b8;
  --color-4: #d8e1e3;
  --color-5: #f2f2f2;
}

SCSS

$color-1: #3e6582;
$color-2: #558b9e;
$color-3: #8fb0b8;
$color-4: #d8e1e3;
$color-5: #f2f2f2;

TAILWIND

colors: {
  'brand-1': '#3e6582',
  'brand-2': '#558b9e',
  'brand-3': '#8fb0b8',
  'brand-4': '#d8e1e3',
  'brand-5': '#f2f2f2',
}

RGB Array

[62, 101, 130], [85, 139, 158], [143, 176, 184], [216, 225, 227], [242, 242, 242]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3E6582, #558B9E, #8FB0B8, #D8E1E3, #F2F2F2 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: #3e6582; --color-2: #558b9e; --color-3: #8fb0b8; --color-4: #d8e1e3; --color-5: #f2f2f2. 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 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