#4C8BB5 + #8E9599 + #5EA3D1 + #8D9CA6 + #69C0FA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4C8BB5

Slate Blue · SteelBlue · Navy Blue

HEX

#4C8BB5

RGB

rgb(76, 139, 181)

HSL

hsl(204, 42%, 50%)

HSB

hsb(204, 58%, 71%)

CMYK

cmyk(58%, 23%, 0%, 29%)

Oklch

oklch(61.2% 0.091 239.8)

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

#8E9599

Ash · LightSlateGray · Silver Sand

HEX

#8E9599

RGB

rgb(142, 149, 153)

HSL

hsl(202, 5%, 58%)

HSB

hsb(202, 7%, 60%)

CMYK

cmyk(7%, 3%, 0%, 40%)

Oklch

oklch(66.5% 0.010 232.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#5EA3D1

Lake Blue · CornflowerBlue · Navy Blue

HEX

#5EA3D1

RGB

rgb(94, 163, 209)

HSL

hsl(204, 56%, 59%)

HSB

hsb(204, 55%, 82%)

CMYK

cmyk(55%, 22%, 0%, 18%)

Oklch

oklch(68.8% 0.098 239.5)

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

#8D9CA6

Slate Blue · DarkGray · Navy Blue

HEX

#8D9CA6

RGB

rgb(141, 156, 166)

HSL

hsl(204, 12%, 60%)

HSB

hsb(204, 15%, 65%)

CMYK

cmyk(15%, 6%, 0%, 35%)

Oklch

oklch(68.4% 0.023 236.9)

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

#69C0FA

Sky Blue · LightSkyBlue · Cobalt Blue

HEX

#69C0FA

RGB

rgb(105, 192, 250)

HSL

hsl(204, 94%, 70%)

HSB

hsb(204, 58%, 98%)

CMYK

cmyk(58%, 23%, 0%, 2%)

Oklch

oklch(77.6% 0.118 239.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4C8BB5

B5754A

Analogous

4AB5AA

4C8BB5

4A55B5

Triadic

4C8BB5

B54A8A

8AB54A

Split-Comp.

4C8BB5

B54A55

B5AA4A

Tetradic

4C8BB5

AA4AB5

B5754A

55B54A

Contrast Matrix WCAG 2.1 Contrast

4C8BB5	8E9599	5EA3D1	8D9CA6	69C0FA
—	1.2 Fail	1.3 Fail	1.3 Fail	1.9 Fail
1.2 Fail	—	1.1 Fail	1.1 Fail	1.5 Fail
1.3 Fail	1.1 Fail	—	1.0 Fail	1.4 Fail
1.3 Fail	1.1 Fail	1.0 Fail	—	1.4 Fail
1.9 Fail	1.5 Fail	1.4 Fail	1.4 Fail	—

White BG

3.7AA Large

3.0AA Large

2.8Fail

2.0Fail

Black BG

5.7AA

6.9AA

7.6AAA

7.4AAA

10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6768AB

919198

7C7CC6

9394A4

8F8FEC

Deuteranopia

645FA8

919098

7873C3

9392A3

8A83E9

Tritanopia

4FA3A1

8E9797

61BDBB

8EA2A1

6DE1DE

Achromatopsia

7D7D7D

939393

949494

999999

ADADAD

Shades & Tints Shades & Tints

#4C8BB5

Dark

Light

#8E9599

Dark

Light

#5EA3D1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4c8bb5;
  --color-2: #8e9599;
  --color-3: #5ea3d1;
  --color-4: #8d9ca6;
  --color-5: #69c0fa;
}

SCSS

$color-1: #4c8bb5;
$color-2: #8e9599;
$color-3: #5ea3d1;
$color-4: #8d9ca6;
$color-5: #69c0fa;

TAILWIND

colors: {
  'brand-1': '#4c8bb5',
  'brand-2': '#8e9599',
  'brand-3': '#5ea3d1',
  'brand-4': '#8d9ca6',
  'brand-5': '#69c0fa',
}

RGB Array

[76, 139, 181], [142, 149, 153], [94, 163, 209], [141, 156, 166], [105, 192, 250]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4C8BB5, #8E9599, #5EA3D1, #8D9CA6, #69C0FA is ideal for: corporate websites, product showcases, portfolios. 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: #4c8bb5; --color-2: #8e9599; --color-3: #5ea3d1; --color-4: #8d9ca6; --color-5: #69c0fa. 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. 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