#5398B3 + #73B0C9 + #97CDE2 + #B5E3F5 + #D5E3E9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#5398B3

Slate Blue · CadetBlue · Lake Green

HEX

#5398B3

RGB

rgb(83, 152, 179)

HSL

hsl(197, 39%, 51%)

HSB

hsb(197, 54%, 70%)

CMYK

cmyk(54%, 15%, 0%, 30%)

Oklch

oklch(64.5% 0.081 225.7)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#73B0C9

Sky Blue · MediumAquaMarine · Lake Green

HEX

#73B0C9

RGB

rgb(115, 176, 201)

HSL

hsl(197, 44%, 62%)

HSB

hsb(197, 43%, 79%)

CMYK

cmyk(43%, 12%, 0%, 21%)

Oklch

oklch(72.5% 0.073 225.8)

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

#97CDE2

Sky Blue · SkyBlue · Lake Green

HEX

#97CDE2

RGB

rgb(151, 205, 226)

HSL

hsl(197, 56%, 74%)

HSB

hsb(197, 33%, 89%)

CMYK

cmyk(33%, 9%, 0%, 11%)

Oklch

oklch(81.8% 0.063 224.0)

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

#B5E3F5

Sky Blue · LightBlue · Glacier Blue

HEX

#B5E3F5

RGB

rgb(181, 227, 245)

HSL

hsl(197, 76%, 84%)

HSB

hsb(197, 26%, 96%)

CMYK

cmyk(26%, 7%, 0%, 4%)

Oklch

oklch(88.9% 0.054 223.7)

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

#D5E3E9

Sky Blue · Lavender · Glacier Blue

HEX

#D5E3E9

RGB

rgb(213, 227, 233)

HSL

hsl(198, 31%, 87%)

HSB

hsb(198, 9%, 91%)

CMYK

cmyk(9%, 3%, 0%, 9%)

Oklch

oklch(90.7% 0.017 225.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5398B3

B36D51

Analogous

51B39E

5398B3

5166B3

Triadic

5398B3

B35197

97B351

Split-Comp.

5398B3

B35166

B39E51

Tetradic

5398B3

9E51B3

B36D51

66B351

Contrast Matrix WCAG 2.1 Contrast

5398B3	73B0C9	97CDE2	B5E3F5	D5E3E9
—	1.3 Fail	1.9 Fail	2.3 Fail	2.5 Fail
1.3 Fail	—	1.4 Fail	1.7 Fail	1.8 Fail
1.9 Fail	1.4 Fail	—	1.3 Fail	1.3 Fail
2.3 Fail	1.7 Fail	1.3 Fail	—	1.0 Fail
2.5 Fail	1.8 Fail	1.3 Fail	1.0 Fail	—

White BG

3.2AA Large

2.4Fail

1.7Fail

1.4Fail

1.3Fail

Black BG

6.5AA

8.8AAA

12.1AAA

15.3AAA

16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7171AC

8D8EC3

AEAFDD

C9C9F1

DBDBE8

Deuteranopia

6D68AB

8A85C2

ABA7DC

C6C3F0

DAD9E7

Tritanopia

56A7A6

76BEBD

9AD9D8

B7EDEC

D6E6E6

Achromatopsia

868686

A1A1A1

BFBFBF

D7D7D7

DFDFDF

Shades & Tints Shades & Tints

#5398B3

Dark

Light

#73B0C9

Dark

Light

#97CDE2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5398b3;
  --color-2: #73b0c9;
  --color-3: #97cde2;
  --color-4: #b5e3f5;
  --color-5: #d5e3e9;
}

SCSS

$color-1: #5398b3;
$color-2: #73b0c9;
$color-3: #97cde2;
$color-4: #b5e3f5;
$color-5: #d5e3e9;

TAILWIND

colors: {
  'brand-1': '#5398b3',
  'brand-2': '#73b0c9',
  'brand-3': '#97cde2',
  'brand-4': '#b5e3f5',
  'brand-5': '#d5e3e9',
}

RGB Array

[83, 152, 179], [115, 176, 201], [151, 205, 226], [181, 227, 245], [213, 227, 233]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5398B3, #73B0C9, #97CDE2, #B5E3F5, #D5E3E9 is ideal for: health products, baby brands, fresh-style blogs. 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: #5398b3; --color-2: #73b0c9; --color-3: #97cde2; --color-4: #b5e3f5; --color-5: #d5e3e9. 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. 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