← Back to Editor

#57A197 · #648590 · #4D557E · #4F3D5F · #A1578D

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 Library

Color Details Color Details

#57A197

Mineral Blue · CadetBlue · Mint Ice

HEX
#57A197
RGB
rgb(87, 161, 151)
HSL
hsl(172, 30%, 49%)
HSB
hsb(172, 46%, 63%)
CMYK
cmyk(46%, 0%, 6%, 37%)
Oklch
oklch(65.8% 0.076 184.3)

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

#648590

Slate Blue · SlateGray · Mint Ice

HEX
#648590
RGB
rgb(100, 133, 144)
HSL
hsl(195, 18%, 48%)
HSB
hsb(195, 31%, 56%)
CMYK
cmyk(31%, 8%, 0%, 44%)
Oklch
oklch(59.6% 0.041 220.3)

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

#4D557E

Indigo · DarkSlateBlue · Prussian Blue

HEX
#4D557E
RGB
rgb(77, 85, 126)
HSL
hsl(230, 24%, 40%)
HSB
hsb(230, 39%, 49%)
CMYK
cmyk(39%, 33%, 0%, 51%)
Oklch
oklch(46.0% 0.068 275.0)

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

#4F3D5F

Dark Plum · DarkSlateGray · Eggplant

HEX
#4F3D5F
RGB
rgb(79, 61, 95)
HSL
hsl(272, 22%, 31%)
HSB
hsb(272, 36%, 37%)
CMYK
cmyk(17%, 36%, 0%, 63%)
Oklch
oklch(39.4% 0.060 308.1)

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

#A1578D

Rose Purple · Gray · Violet

HEX
#A1578D
RGB
rgb(161, 87, 141)
HSL
hsl(316, 30%, 49%)
HSB
hsb(316, 46%, 63%)
CMYK
cmyk(0%, 46%, 12%, 37%)
Oklch
oklch(56.2% 0.119 338.1)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

57A197
A25761

Analogous

57A273
57A197
5787A2

Triadic

57A197
9857A2
A29857

Split-Comp.

57A197
A25787
A27357

Tetradic

57A197
7357A2
A25761
87A257

Contrast Matrix WCAG 2.1 Contrast

57A197
648590
4D557E
4F3D5F
A1578D
—
1.3
Fail
2.4
Fail
3.2
AA Large
1.6
Fail
1.3
Fail
—
1.8
Fail
2.4
Fail
1.2
Fail
2.4
Fail
1.8
Fail
—
1.3
Fail
1.5
Fail
3.2
AA Large
2.4
Fail
1.3
Fail
—
2.0
Fail
1.6
Fail
1.2
Fail
1.5
Fail
2.0
Fail
—
White BG
3.0AA Large
4.0AA Large
7.2AAA
9.7AAA
4.9AA
Black BG
7.0AA
5.3AA
2.9Fail
2.2Fail
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

777899
72738D
505174
474757
818080

Deuteranopia

736D9A
706E8D
504F72
484A55
858B7D

Tritanopia

5B9B9C
668B8B
4D6C6B
4E504F
9D7673

Achromatopsia

8A8A8A
7C7C7C
575757
464646
737373

Shades & Tints Shades & Tints

#57A197

Dark
Light

#648590

Dark
Light

#4D557E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #57a197;
  --color-2: #648590;
  --color-3: #4d557e;
  --color-4: #4f3d5f;
  --color-5: #a1578d;
}

SCSS

$color-1: #57a197;
$color-2: #648590;
$color-3: #4d557e;
$color-4: #4f3d5f;
$color-5: #a1578d;

TAILWIND

colors: {
  'brand-1': '#57a197',
  'brand-2': '#648590',
  'brand-3': '#4d557e',
  'brand-4': '#4f3d5f',
  'brand-5': '#a1578d',
}

RGB Array

[87, 161, 151], [100, 133, 144], [77, 85, 126], [79, 61, 95], [161, 87, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #57A197, #648590, #4D557E, #4F3D5F, #A1578D is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #57a197; --color-2: #648590; --color-3: #4d557e; --color-4: #4f3d5f; --color-5: #a1578d. 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. 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