← Back to Editor

#476395 · #6184BC · #91B3D8 · #B9D5ED · #FAFCFF

A 5-color palette 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

#476395

Indigo · DarkSlateBlue · Navy Blue

HEX
#476395
RGB
rgb(71, 99, 149)
HSL
hsl(218, 35%, 43%)
HSB
hsb(218, 52%, 58%)
CMYK
cmyk(52%, 34%, 0%, 42%)
Oklch
oklch(50.0% 0.087 261.4)

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

#6184BC

Azure · SteelBlue · Navy Blue

HEX
#6184BC
RGB
rgb(97, 132, 188)
HSL
hsl(217, 40%, 56%)
HSB
hsb(217, 48%, 74%)
CMYK
cmyk(48%, 30%, 0%, 26%)
Oklch
oklch(61.1% 0.094 259.5)

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

#91B3D8

Azure · SkyBlue · Cobalt Blue

HEX
#91B3D8
RGB
rgb(145, 179, 216)
HSL
hsl(211, 48%, 71%)
HSB
hsb(211, 33%, 85%)
CMYK
cmyk(33%, 17%, 0%, 15%)
Oklch
oklch(75.5% 0.065 250.8)

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

#B9D5ED

Sky Blue · LightBlue · Sky Blue

HEX
#B9D5ED
RGB
rgb(185, 213, 237)
HSL
hsl(208, 59%, 83%)
HSB
hsb(208, 22%, 93%)
CMYK
cmyk(22%, 10%, 0%, 7%)
Oklch
oklch(86.0% 0.045 244.2)

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

#FAFCFF

Azure · White · Sky Blue

HEX
#FAFCFF
RGB
rgb(250, 252, 255)
HSL
hsl(216, 100%, 99%)
HSB
hsb(216, 2%, 100%)
CMYK
cmyk(2%, 1%, 0%, 0%)
Oklch
oklch(99.0% 0.005 258.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

476395
947847

Analogous

478A94
476395
524794

Triadic

476395
944763
639447

Split-Comp.

476395
945247
8A9447

Tetradic

476395
94478A
947847
479452

Contrast Matrix WCAG 2.1 Contrast

476395
6184BC
91B3D8
B9D5ED
FAFCFF
—
1.6
Fail
2.8
Fail
4.0
AA Large
5.9
AA
1.6
Fail
—
1.7
Fail
2.5
Fail
3.7
AA Large
2.8
Fail
1.7
Fail
—
1.4
Fail
2.1
Fail
4.0
AA Large
2.5
Fail
1.4
Fail
—
1.5
Fail
5.9
AA
3.7
AA Large
2.1
Fail
1.5
Fail
—
White BG
6.0AA
3.8AA Large
2.2Fail
1.5Fail
1.0Fail
Black BG
3.5AA Large
5.5AA
9.6AAA
13.8AAA
20.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

535389
7070AE
A0A0CF
C5C5E7
FBFBFE

Deuteranopia

524F86
6E6CAB
9E9BCD
C4C1E6
FBFBFE

Tritanopia

487F7D
63A4A1
93C8C6
BAE3E2
FAFEFE

Achromatopsia

606060
808080
ADADAD
CFCFCF
FCFCFC

Shades & Tints Shades & Tints

#476395

Dark
Light

#6184BC

Dark
Light

#91B3D8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #476395;
  --color-2: #6184bc;
  --color-3: #91b3d8;
  --color-4: #b9d5ed;
  --color-5: #fafcff;
}

SCSS

$color-1: #476395;
$color-2: #6184bc;
$color-3: #91b3d8;
$color-4: #b9d5ed;
$color-5: #fafcff;

TAILWIND

colors: {
  'brand-1': '#476395',
  'brand-2': '#6184bc',
  'brand-3': '#91b3d8',
  'brand-4': '#b9d5ed',
  'brand-5': '#fafcff',
}

RGB Array

[71, 99, 149], [97, 132, 188], [145, 179, 216], [185, 213, 237], [250, 252, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #476395, #6184BC, #91B3D8, #B9D5ED, #FAFCFF 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: #476395; --color-2: #6184bc; --color-3: #91b3d8; --color-4: #b9d5ed; --color-5: #fafcff. 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