← Back to Editor

#577D92 · #E8B8AE · #D9274B · #FF5080 · #1A2529

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

#577D92

Slate Blue · SlateGray · Navy Blue

HEX
#577D92
RGB
rgb(87, 125, 146)
HSL
hsl(201, 25%, 46%)
HSB
hsb(201, 40%, 57%)
CMYK
cmyk(40%, 14%, 0%, 43%)
Oklch
oklch(56.9% 0.054 233.1)

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

#E8B8AE

Peach Pink · LightPink · Coral Red

HEX
#E8B8AE
RGB
rgb(232, 184, 174)
HSL
hsl(10, 56%, 80%)
HSB
hsb(10, 25%, 91%)
CMYK
cmyk(0%, 21%, 25%, 9%)
Oklch
oklch(82.3% 0.058 31.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D9274B

Vermilion · Crimson · Passion Red

HEX
#D9274B
RGB
rgb(217, 39, 75)
HSL
hsl(348, 70%, 50%)
HSB
hsb(348, 82%, 85%)
CMYK
cmyk(0%, 82%, 65%, 15%)
Oklch
oklch(57.7% 0.210 16.8)

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

#FF5080

Rouge · Salmon · Rose Pink

HEX
#FF5080
RGB
rgb(255, 80, 128)
HSL
hsl(344, 100%, 66%)
HSB
hsb(344, 69%, 100%)
CMYK
cmyk(0%, 69%, 50%, 0%)
Oklch
oklch(68.6% 0.212 8.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#1A2529

Slate Blue · DarkSlateGray · Peacock Green

HEX
#1A2529
RGB
rgb(26, 37, 41)
HSL
hsl(196, 22%, 13%)
HSB
hsb(196, 37%, 16%)
CMYK
cmyk(37%, 10%, 0%, 84%)
Oklch
oklch(25.6% 0.017 222.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

577D92
936D58

Analogous

58938A
577D92
586193

Triadic

577D92
93587E
7E9358

Split-Comp.

577D92
935861
938A58

Tetradic

577D92
8A5893
936D58
619358

Contrast Matrix WCAG 2.1 Contrast

577D92
E8B8AE
D9274B
FF5080
1A2529
—
2.5
Fail
1.1
Fail
1.4
Fail
3.5
AA Large
2.5
Fail
—
2.7
Fail
1.8
Fail
8.9
AAA
1.1
Fail
2.7
Fail
—
1.5
Fail
3.2
AA Large
1.4
Fail
1.8
Fail
1.5
Fail
—
5.0
AA
3.5
AA Large
8.9
AAA
3.2
AA Large
5.0
AA
—
White BG
4.4AA Large
1.8Fail
4.8AA
3.1AA Large
15.7AAA
Black BG
4.8AA
11.9AAA
4.3AA Large
6.7AA
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

67688D
D3D3B0
8C8A42
B3B274
1F1F28

Deuteranopia

65628C
D6DAB1
96A440
BDCB72
1E1D28

Tritanopia

598988
E6B2B3
D03B3A
F66B69
1B2727

Achromatopsia

747474
C5C5C5
606060
8A8A8A
222222

Shades & Tints Shades & Tints

#577D92

Dark
Light

#E8B8AE

Dark
Light

#D9274B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #577d92;
  --color-2: #e8b8ae;
  --color-3: #d9274b;
  --color-4: #ff5080;
  --color-5: #1a2529;
}

SCSS

$color-1: #577d92;
$color-2: #e8b8ae;
$color-3: #d9274b;
$color-4: #ff5080;
$color-5: #1a2529;

TAILWIND

colors: {
  'brand-1': '#577d92',
  'brand-2': '#e8b8ae',
  'brand-3': '#d9274b',
  'brand-4': '#ff5080',
  'brand-5': '#1a2529',
}

RGB Array

[87, 125, 146], [232, 184, 174], [217, 39, 75], [255, 80, 128], [26, 37, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #577D92, #E8B8AE, #D9274B, #FF5080, #1A2529 is ideal for: 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: #577d92; --color-2: #e8b8ae; --color-3: #d9274b; --color-4: #ff5080; --color-5: #1a2529. 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. 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