← Back to Editor

#173072 · #1B4BBA · #5A96EC · #9FC5FF · #FFF361

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#173072

Indigo · MidnightBlue · Prussian Blue

HEX
#173072
RGB
rgb(23, 48, 114)
HSL
hsl(224, 66%, 27%)
HSB
hsb(224, 80%, 45%)
CMYK
cmyk(80%, 58%, 0%, 55%)
Oklch
oklch(33.3% 0.118 264.9)

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

#1B4BBA

Indigo · DarkSlateBlue · Navy Blue

HEX
#1B4BBA
RGB
rgb(27, 75, 186)
HSL
hsl(222, 75%, 42%)
HSB
hsb(222, 85%, 73%)
CMYK
cmyk(85%, 60%, 0%, 27%)
Oklch
oklch(45.5% 0.183 263.3)

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

#5A96EC

Azure · CornflowerBlue · Cobalt Blue

HEX
#5A96EC
RGB
rgb(90, 150, 236)
HSL
hsl(215, 79%, 64%)
HSB
hsb(215, 62%, 93%)
CMYK
cmyk(62%, 36%, 0%, 7%)
Oklch
oklch(67.1% 0.143 257.5)

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

#9FC5FF

Azure · LightSkyBlue · Sky Blue

HEX
#9FC5FF
RGB
rgb(159, 197, 255)
HSL
hsl(216, 100%, 81%)
HSB
hsb(216, 38%, 100%)
CMYK
cmyk(38%, 23%, 0%, 0%)
Oklch
oklch(81.7% 0.092 258.7)

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

#FFF361

Fresh Green · Khaki · Sunflower

HEX
#FFF361
RGB
rgb(255, 243, 97)
HSL
hsl(55, 100%, 69%)
HSB
hsb(55, 62%, 100%)
CMYK
cmyk(0%, 5%, 62%, 0%)
Oklch
oklch(94.7% 0.164 104.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

173072
725A17

Analogous

175D72
173072
2D1772

Triadic

173072
721730
307217

Split-Comp.

173072
722D17
5D7217

Tetradic

173072
72175D
725A17
17722D

Contrast Matrix WCAG 2.1 Contrast

173072
1B4BBA
5A96EC
9FC5FF
FFF361
—
1.6
Fail
4.1
AA Large
7.0
AA
10.7
AAA
1.6
Fail
—
2.5
Fail
4.3
AA Large
6.6
AA
4.1
AA Large
2.5
Fail
—
1.7
Fail
2.6
Fail
7.0
AA
4.3
AA Large
1.7
Fail
—
1.5
Fail
10.7
AAA
6.6
AA
2.6
Fail
1.5
Fail
—
White BG
12.3AAA
7.6AAA
3.0Fail
1.8Fail
1.2Fail
Black BG
1.7Fail
2.8Fail
7.0AAA
11.9AAA
18.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

222262
30309F
7475D7
AFB0F1
FAFA84

Deuteranopia

201E5E
2D2999
716CD2
ADAAEE
FBFB8D

Tritanopia

185553
1D8A85
5DC7C3
A1E6E3
FEA0A6

Achromatopsia

303030
494949
8E8E8E
C0C0C0
E6E6E6

Shades & Tints Shades & Tints

#173072

Dark
Light

#1B4BBA

Dark
Light

#5A96EC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #173072;
  --color-2: #1b4bba;
  --color-3: #5a96ec;
  --color-4: #9fc5ff;
  --color-5: #fff361;
}

SCSS

$color-1: #173072;
$color-2: #1b4bba;
$color-3: #5a96ec;
$color-4: #9fc5ff;
$color-5: #fff361;

TAILWIND

colors: {
  'brand-1': '#173072',
  'brand-2': '#1b4bba',
  'brand-3': '#5a96ec',
  'brand-4': '#9fc5ff',
  'brand-5': '#fff361',
}

RGB Array

[23, 48, 114], [27, 75, 186], [90, 150, 236], [159, 197, 255], [255, 243, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #173072, #1B4BBA, #5A96EC, #9FC5FF, #FFF361 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #173072; --color-2: #1b4bba; --color-3: #5a96ec; --color-4: #9fc5ff; --color-5: #fff361. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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