#5B3E66 + #7868A6 + #7986B8 + #76AAC2 + #86C9B5 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5B3E66

Dark Plum · DarkSlateBlue · Eggplant

HEX

#5B3E66

RGB

rgb(91, 62, 102)

HSL

hsl(284, 24%, 32%)

HSB

hsb(284, 39%, 40%)

CMYK

cmyk(11%, 39%, 0%, 60%)

Oklch

oklch(41.3% 0.074 316.4)

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

#7868A6

Deep Indigo · SlateGray · Navy Blue

HEX

#7868A6

RGB

rgb(120, 104, 166)

HSL

hsl(255, 26%, 53%)

HSB

hsb(255, 37%, 65%)

CMYK

cmyk(28%, 37%, 0%, 35%)

Oklch

oklch(55.8% 0.096 295.0)

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

#7986B8

Azure · LightSlateGray · Navy Blue

HEX

#7986B8

RGB

rgb(121, 134, 184)

HSL

hsl(228, 31%, 60%)

HSB

hsb(228, 34%, 72%)

CMYK

cmyk(34%, 27%, 0%, 28%)

Oklch

oklch(62.9% 0.077 272.8)

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

#76AAC2

Sky Blue · CadetBlue · Lake Green

HEX

#76AAC2

RGB

rgb(118, 170, 194)

HSL

hsl(199, 38%, 61%)

HSB

hsb(199, 39%, 76%)

CMYK

cmyk(39%, 12%, 0%, 24%)

Oklch

oklch(71.0% 0.065 228.5)

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

#86C9B5

Jade · MediumAquaMarine · Lake Green

HEX

#86C9B5

RGB

rgb(134, 201, 181)

HSL

hsl(162, 38%, 66%)

HSB

hsb(162, 33%, 79%)

CMYK

cmyk(33%, 0%, 10%, 21%)

Oklch

oklch(78.5% 0.074 173.6)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B3E66

48653E

Analogous

473E65

5B3E66

653E5C

Triadic

5B3E66

655B3E

3E655B

Split-Comp.

5B3E66

5C653E

3E6547

Tetradic

5B3E66

65473E

48653E

3E5C65

Contrast Matrix WCAG 2.1 Contrast

5B3E66	7868A6	7986B8	76AAC2	86C9B5
—	1.9 Fail	2.5 Fail	3.6 AA Large	4.7 AA
1.9 Fail	—	1.4 Fail	1.9 Fail	2.5 Fail
2.5 Fail	1.4 Fail	—	1.4 Fail	1.9 Fail
3.6 AA Large	1.9 Fail	1.4 Fail	—	1.3 Fail
4.7 AA	2.5 Fail	1.9 Fail	1.3 Fail	—

White BG

9.0AAA

4.9AA

3.6AA Large

2.5Fail

1.9Fail

Black BG

2.3Fail

4.3AA Large

5.9AA

8.3AAA

11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E5C

717197

7F7FAC

8D8DBC

A3A4BA

Deuteranopia

50525A

727393

7E7DA9

8A86BB

9F9ABB

Tritanopia

5A5553

778B89

7AA2A0

79B8B7

89BEBF

Achromatopsia

4B4B4B

747474

888888

9D9D9D

B3B3B3

Shades & Tints Shades & Tints

#5B3E66

Dark

Light

#7868A6

Dark

Light

#7986B8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b3e66;
  --color-2: #7868a6;
  --color-3: #7986b8;
  --color-4: #76aac2;
  --color-5: #86c9b5;
}

SCSS

$color-1: #5b3e66;
$color-2: #7868a6;
$color-3: #7986b8;
$color-4: #76aac2;
$color-5: #86c9b5;

TAILWIND

colors: {
  'brand-1': '#5b3e66',
  'brand-2': '#7868a6',
  'brand-3': '#7986b8',
  'brand-4': '#76aac2',
  'brand-5': '#86c9b5',
}

RGB Array

[91, 62, 102], [120, 104, 166], [121, 134, 184], [118, 170, 194], [134, 201, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #5B3E66, #7868A6, #7986B8, #76AAC2, #86C9B5 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: #5b3e66; --color-2: #7868a6; --color-3: #7986b8; --color-4: #76aac2; --color-5: #86c9b5. 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 sea-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