← Back to Editor

#097CC9 · #89C9DE · #869ECD · #6567CE · #21124B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#097CC9

Lake Blue · DodgerBlue · Navy Blue

HEX
#097CC9
RGB
rgb(9, 124, 201)
HSL
hsl(204, 91%, 41%)
HSB
hsb(204, 96%, 79%)
CMYK
cmyk(96%, 38%, 0%, 21%)
Oklch
oklch(57.1% 0.148 247.2)

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

#89C9DE

Sky Blue · SkyBlue · Lake Green

HEX
#89C9DE
RGB
rgb(137, 201, 222)
HSL
hsl(195, 56%, 70%)
HSB
hsb(195, 38%, 87%)
CMYK
cmyk(38%, 9%, 0%, 13%)
Oklch
oklch(80.0% 0.071 220.5)

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

#869ECD

Azure · CornflowerBlue · Cobalt Blue

HEX
#869ECD
RGB
rgb(134, 158, 205)
HSL
hsl(220, 42%, 66%)
HSB
hsb(220, 35%, 80%)
CMYK
cmyk(35%, 23%, 0%, 20%)
Oklch
oklch(69.8% 0.075 263.5)

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

#6567CE

Azure · SlateBlue · Navy Blue

HEX
#6567CE
RGB
rgb(101, 103, 206)
HSL
hsl(239, 52%, 60%)
HSB
hsb(239, 51%, 81%)
CMYK
cmyk(51%, 50%, 0%, 19%)
Oklch
oklch(56.4% 0.155 279.3)

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

#21124B

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#21124B
RGB
rgb(33, 18, 75)
HSL
hsl(256, 61%, 18%)
HSB
hsb(256, 76%, 29%)
CMYK
cmyk(56%, 76%, 0%, 71%)
Oklch
oklch(24.3% 0.099 288.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

097CC9
C85609

Analogous

09C8B5
097CC9
091CC8

Triadic

097CC9
C8097C
7CC809

Split-Comp.

097CC9
C8091C
C8B509

Tetradic

097CC9
B509C8
C85609
1CC809

Contrast Matrix WCAG 2.1 Contrast

097CC9
89C9DE
869ECD
6567CE
21124B
—
2.4
Fail
1.6
Fail
1.1
Fail
3.8
AA Large
2.4
Fail
—
1.5
Fail
2.6
Fail
9.2
AAA
1.6
Fail
1.5
Fail
—
1.8
Fail
6.2
AA
1.1
Fail
2.6
Fail
1.8
Fail
—
3.5
AA Large
3.8
AA Large
9.2
AAA
6.2
AA
3.5
AA Large
—
White BG
4.4AA Large
1.8Fail
2.7Fail
4.8AA
16.8AAA
Black BG
4.7AA
11.5AAA
7.8AAA
4.4AA Large
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3CB6
A5A5D9
9091C2
6666B5
1B1A3D

Deuteranopia

342BB2
A19CD8
8F8DBF
6666AF
1B1C3A

Tritanopia

0FA8A4
8CD5D4
87B9B7
65A19D
203230

Achromatopsia

626262
B8B8B8
9C9C9C
727272
1D1D1D

Shades & Tints Shades & Tints

#097CC9

Dark
Light

#89C9DE

Dark
Light

#869ECD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #097cc9;
  --color-2: #89c9de;
  --color-3: #869ecd;
  --color-4: #6567ce;
  --color-5: #21124b;
}

SCSS

$color-1: #097cc9;
$color-2: #89c9de;
$color-3: #869ecd;
$color-4: #6567ce;
$color-5: #21124b;

TAILWIND

colors: {
  'brand-1': '#097cc9',
  'brand-2': '#89c9de',
  'brand-3': '#869ecd',
  'brand-4': '#6567ce',
  'brand-5': '#21124b',
}

RGB Array

[9, 124, 201], [137, 201, 222], [134, 158, 205], [101, 103, 206], [33, 18, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #097CC9, #89C9DE, #869ECD, #6567CE, #21124B 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: #097cc9; --color-2: #89c9de; --color-3: #869ecd; --color-4: #6567ce; --color-5: #21124b. 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