← Back to Editor

#6EB4BC · #818E9F · #575A69 · #3F414E · #222337

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#6EB4BC

Slate Blue · MediumAquaMarine · Lake Green

HEX
#6EB4BC
RGB
rgb(110, 180, 188)
HSL
hsl(186, 37%, 58%)
HSB
hsb(186, 41%, 74%)
CMYK
cmyk(41%, 4%, 0%, 26%)
Oklch
oklch(72.7% 0.071 205.0)

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

#818E9F

Azure · LightSlateGray · Navy Blue

HEX
#818E9F
RGB
rgb(129, 142, 159)
HSL
hsl(214, 14%, 56%)
HSB
hsb(214, 19%, 62%)
CMYK
cmyk(19%, 11%, 0%, 38%)
Oklch
oklch(64.2% 0.030 255.2)

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

#575A69

Indigo · DimGray · Charcoal

HEX
#575A69
RGB
rgb(87, 90, 105)
HSL
hsl(230, 9%, 38%)
HSB
hsb(230, 17%, 41%)
CMYK
cmyk(17%, 14%, 0%, 59%)
Oklch
oklch(47.0% 0.024 276.5)

Traditional「Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#3F414E

Indigo · DarkSlateGray · Prussian Blue

HEX
#3F414E
RGB
rgb(63, 65, 78)
HSL
hsl(232, 11%, 28%)
HSB
hsb(232, 19%, 31%)
CMYK
cmyk(19%, 17%, 0%, 69%)
Oklch
oklch(37.9% 0.022 278.4)

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

#222337

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#222337
RGB
rgb(34, 35, 55)
HSL
hsl(237, 24%, 17%)
HSB
hsb(237, 38%, 22%)
CMYK
cmyk(38%, 36%, 0%, 78%)
Oklch
oklch(26.5% 0.037 281.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6EB4BC
BC746C

Analogous

6CBC9C
6EB4BC
6C8CBC

Triadic

6EB4BC
BC6CB4
B4BC6C

Split-Comp.

6EB4BC
BC6C8C
BC9C6C

Tetradic

6EB4BC
9C6CBC
BC746C
8CBC6C

Contrast Matrix WCAG 2.1 Contrast

6EB4BC
818E9F
575A69
3F414E
222337
—
1.4
Fail
2.9
Fail
4.3
AA Large
6.5
AA
1.4
Fail
—
2.1
Fail
3.0
AA Large
4.6
AA
2.9
Fail
2.1
Fail
—
1.5
Fail
2.3
Fail
4.3
AA Large
3.0
AA Large
1.5
Fail
—
1.5
Fail
6.5
AA
4.6
AA
2.3
Fail
1.5
Fail
—
White BG
2.4Fail
3.3AA Large
6.8AA
10.1AAA
15.4AAA
Black BG
8.9AAA
6.3AA
3.1AA Large
2.1Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8DBA
87879B
585865
40404B
222232

Deuteranopia

8883BA
86859A
585865
40404A
222231

Tritanopia

72B9B8
829897
576362
3F4848
222E2E

Achromatopsia

A0A0A0
8C8C8C
5B5B5B
424242
252525

Shades & Tints Shades & Tints

#6EB4BC

Dark
Light

#818E9F

Dark
Light

#575A69

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6eb4bc;
  --color-2: #818e9f;
  --color-3: #575a69;
  --color-4: #3f414e;
  --color-5: #222337;
}

SCSS

$color-1: #6eb4bc;
$color-2: #818e9f;
$color-3: #575a69;
$color-4: #3f414e;
$color-5: #222337;

TAILWIND

colors: {
  'brand-1': '#6eb4bc',
  'brand-2': '#818e9f',
  'brand-3': '#575a69',
  'brand-4': '#3f414e',
  'brand-5': '#222337',
}

RGB Array

[110, 180, 188], [129, 142, 159], [87, 90, 105], [63, 65, 78], [34, 35, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6EB4BC, #818E9F, #575A69, #3F414E, #222337 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #6eb4bc; --color-2: #818e9f; --color-3: #575a69; --color-4: #3f414e; --color-5: #222337. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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