← Back to Editor

#50717A · #4C606B · #464E5B · #342029 · #E75645

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#50717A

Slate Blue · DimGray · Mint Ice

HEX
#50717A
RGB
rgb(80, 113, 122)
HSL
hsl(193, 21%, 40%)
HSB
hsb(193, 34%, 48%)
CMYK
cmyk(34%, 7%, 0%, 52%)
Oklch
oklch(52.7% 0.040 216.5)

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

#4C606B

Slate Blue · DimGray · Prussian Blue

HEX
#4C606B
RGB
rgb(76, 96, 107)
HSL
hsl(201, 17%, 36%)
HSB
hsb(201, 29%, 42%)
CMYK
cmyk(29%, 10%, 0%, 58%)
Oklch
oklch(47.7% 0.030 232.3)

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

#464E5B

Indigo · DarkSlateGray · Prussian Blue

HEX
#464E5B
RGB
rgb(70, 78, 91)
HSL
hsl(217, 13%, 32%)
HSB
hsb(217, 23%, 36%)
CMYK
cmyk(23%, 14%, 0%, 64%)
Oklch
oklch(42.2% 0.024 260.1)

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

#342029

Dark Violet · DarkSlateGray · Raspberry

HEX
#342029
RGB
rgb(52, 32, 41)
HSL
hsl(333, 24%, 16%)
HSB
hsb(333, 38%, 20%)
CMYK
cmyk(0%, 38%, 21%, 80%)
Oklch
oklch(27.2% 0.034 351.0)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#E75645

Vermilion · Tomato · Passion Red

HEX
#E75645
RGB
rgb(231, 86, 69)
HSL
hsl(6, 77%, 59%)
HSB
hsb(6, 70%, 91%)
CMYK
cmyk(0%, 63%, 70%, 9%)
Oklch
oklch(64.3% 0.183 29.6)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

50717A
7B5A51

Analogous

517B6F
50717A
515D7B

Triadic

50717A
7B5172
727B51

Split-Comp.

50717A
7B515D
7B6F51

Tetradic

50717A
6F517B
7B5A51
5D7B51

Contrast Matrix WCAG 2.1 Contrast

50717A
4C606B
464E5B
342029
E75645
—
1.2
Fail
1.6
Fail
2.9
Fail
1.5
Fail
1.2
Fail
—
1.3
Fail
2.3
Fail
1.8
Fail
1.6
Fail
1.3
Fail
—
1.8
Fail
2.3
Fail
2.9
Fail
2.3
Fail
1.8
Fail
—
4.2
AA Large
1.5
Fail
1.8
Fail
2.3
Fail
4.2
AA Large
—
White BG
5.3AA
6.6AA
8.4AAA
15.2AAA
3.6AA Large
Black BG
4.0AA Large
3.2AA Large
2.5Fail
1.4Fail
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5F78
555568
494A58
2B2B27
A8A749

Deuteranopia

5C5A77
545268
494857
2D2E26
B1BC4A

Tritanopia

527676
4D6666
465555
332525
E04C4D

Achromatopsia

686868
5B5B5B
4D4D4D
272727
7F7F7F

Shades & Tints Shades & Tints

#50717A

Dark
Light

#4C606B

Dark
Light

#464E5B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #50717a;
  --color-2: #4c606b;
  --color-3: #464e5b;
  --color-4: #342029;
  --color-5: #e75645;
}

SCSS

$color-1: #50717a;
$color-2: #4c606b;
$color-3: #464e5b;
$color-4: #342029;
$color-5: #e75645;

TAILWIND

colors: {
  'brand-1': '#50717a',
  'brand-2': '#4c606b',
  'brand-3': '#464e5b',
  'brand-4': '#342029',
  'brand-5': '#e75645',
}

RGB Array

[80, 113, 122], [76, 96, 107], [70, 78, 91], [52, 32, 41], [231, 86, 69]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #50717A, #4C606B, #464E5B, #342029, #E75645 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #50717a; --color-2: #4c606b; --color-3: #464e5b; --color-4: #342029; --color-5: #e75645. 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 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