#5BCCD6 + #599FAF + #588193 + #56536C + #553357 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5BCCD6

Lake Blue · MediumTurquoise · Lake Green

HEX

#5BCCD6

RGB

rgb(91, 204, 214)

HSL

hsl(185, 60%, 60%)

HSB

hsb(185, 57%, 84%)

CMYK

cmyk(57%, 5%, 0%, 16%)

Oklch

oklch(78.4% 0.103 203.2)

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

#599FAF

Slate Blue · CadetBlue · Lake Green

HEX

#599FAF

RGB

rgb(89, 159, 175)

HSL

hsl(191, 35%, 52%)

HSB

hsb(191, 49%, 69%)

CMYK

cmyk(49%, 9%, 0%, 31%)

Oklch

oklch(66.3% 0.074 214.2)

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

#588193

Slate Blue · SlateGray · Mint Ice

HEX

#588193

RGB

rgb(88, 129, 147)

HSL

hsl(198, 25%, 46%)

HSB

hsb(198, 40%, 58%)

CMYK

cmyk(40%, 12%, 0%, 42%)

Oklch

oklch(58.0% 0.053 227.2)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#56536C

Deep Indigo · DimGray · Prussian Blue

HEX

#56536C

RGB

rgb(86, 83, 108)

HSL

hsl(247, 13%, 37%)

HSB

hsb(247, 23%, 42%)

CMYK

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

Oklch

oklch(45.5% 0.041 290.2)

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

#553357

Dark Plum · DarkSlateGray · Eggplant

HEX

#553357

RGB

rgb(85, 51, 87)

HSL

hsl(297, 26%, 27%)

HSB

hsb(297, 41%, 34%)

CMYK

cmyk(2%, 41%, 0%, 66%)

Oklch

oklch(37.7% 0.074 324.9)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5BCCD6

D6665C

Analogous

5CD6A3

5BCCD6

5C8FD6

Triadic

5BCCD6

D65CCC

CCD65C

Split-Comp.

5BCCD6

D65C8F

D6A35C

Tetradic

5BCCD6

A35CD6

D6665C

8FD65C

Contrast Matrix WCAG 2.1 Contrast

5BCCD6	599FAF	588193	56536C	553357
—	1.6 Fail	2.2 Fail	3.9 AA Large	5.5 AA
1.6 Fail	—	1.4 Fail	2.5 Fail	3.5 AA Large
2.2 Fail	1.4 Fail	—	1.7 Fail	2.5 Fail
3.9 AA Large	2.5 Fail	1.7 Fail	—	1.4 Fail
5.5 AA	3.5 AA Large	2.5 Fail	1.4 Fail	—

White BG

1.9Fail

3.0Fail

4.2AA Large

7.4AAA

10.5AAA

Black BG

11.1AAA

7.0AAA

5.0AA

2.8Fail

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8DD4

7778AB

6A6A8F

555566

46464E

Deuteranopia

857DD3

736EAA

67648E

555565

484B4C

Tritanopia

61D2D1

5DA8A7

5A8B8A

566160

534746

Achromatopsia

ABABAB

8C8C8C

777777

575757

414141

Shades & Tints Shades & Tints

#5BCCD6

Dark

Light

#599FAF

Dark

Light

#588193

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5bccd6;
  --color-2: #599faf;
  --color-3: #588193;
  --color-4: #56536c;
  --color-5: #553357;
}

SCSS

$color-1: #5bccd6;
$color-2: #599faf;
$color-3: #588193;
$color-4: #56536c;
$color-5: #553357;

TAILWIND

colors: {
  'brand-1': '#5bccd6',
  'brand-2': '#599faf',
  'brand-3': '#588193',
  'brand-4': '#56536c',
  'brand-5': '#553357',
}

RGB Array

[91, 204, 214], [89, 159, 175], [88, 129, 147], [86, 83, 108], [85, 51, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5BCCD6, #599FAF, #588193, #56536C, #553357 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: #5bccd6; --color-2: #599faf; --color-3: #588193; --color-4: #56536c; --color-5: #553357. 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