← Back to Editor

#307563 · #57AFA1 · #94C7BE · #E9CDB8 · #FD5377

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

#307563

Mineral Blue · SeaGreen · Mint Ice

HEX
#307563
RGB
rgb(48, 117, 99)
HSL
hsl(164, 42%, 32%)
HSB
hsb(164, 59%, 46%)
CMYK
cmyk(59%, 0%, 15%, 54%)
Oklch
oklch(51.3% 0.076 173.4)

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

#57AFA1

Mineral Blue · CadetBlue · Lake Green

HEX
#57AFA1
RGB
rgb(87, 175, 161)
HSL
hsl(170, 35%, 51%)
HSB
hsb(170, 50%, 69%)
CMYK
cmyk(50%, 0%, 8%, 31%)
Oklch
oklch(69.5% 0.088 182.0)

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

#94C7BE

Jade · DarkGray · Lake Green

HEX
#94C7BE
RGB
rgb(148, 199, 190)
HSL
hsl(169, 31%, 68%)
HSB
hsb(169, 26%, 78%)
CMYK
cmyk(26%, 0%, 5%, 22%)
Oklch
oklch(79.1% 0.055 182.8)

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

#E9CDB8

Apricot · Wheat · Peach Orange

HEX
#E9CDB8
RGB
rgb(233, 205, 184)
HSL
hsl(26, 53%, 82%)
HSB
hsb(26, 21%, 91%)
CMYK
cmyk(0%, 12%, 21%, 9%)
Oklch
oklch(86.6% 0.042 59.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FD5377

Peach Pink · Salmon · Coral Red

HEX
#FD5377
RGB
rgb(253, 83, 119)
HSL
hsl(347, 98%, 66%)
HSB
hsb(347, 67%, 99%)
CMYK
cmyk(0%, 67%, 53%, 1%)
Oklch
oklch(68.3% 0.206 12.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

307563
742F42

Analogous

2F743F
307563
2F6474

Triadic

307563
622F74
74622F

Split-Comp.

307563
742F64
743F2F

Tetradic

307563
3F2F74
742F42
64742F

Contrast Matrix WCAG 2.1 Contrast

307563
57AFA1
94C7BE
E9CDB8
FD5377
—
2.1
Fail
2.9
Fail
3.6
AA Large
1.7
Fail
2.1
Fail
—
1.4
Fail
1.7
Fail
1.2
Fail
2.9
Fail
1.4
Fail
—
1.2
Fail
1.7
Fail
3.6
AA Large
1.7
Fail
1.2
Fail
—
2.1
Fail
1.7
Fail
1.2
Fail
1.7
Fail
2.1
Fail
—
White BG
5.5AA
2.6Fail
1.9Fail
1.5Fail
3.1AA Large
Black BG
3.9AA Large
8.1AAA
11.2AAA
13.9AAA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E67
7D7EA4
AAABC0
DDDDBD
B3B26E

Deuteranopia

4A4568
7871A5
A7A3C1
DFE1BE
BDCA6C

Tritanopia

336B6C
5BA7A8
97C2C2
E8C1C2
F56766

Achromatopsia

5E5E5E
939393
B7B7B7
D3D3D3
8A8A8A

Shades & Tints Shades & Tints

#307563

Dark
Light

#57AFA1

Dark
Light

#94C7BE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #307563;
  --color-2: #57afa1;
  --color-3: #94c7be;
  --color-4: #e9cdb8;
  --color-5: #fd5377;
}

SCSS

$color-1: #307563;
$color-2: #57afa1;
$color-3: #94c7be;
$color-4: #e9cdb8;
$color-5: #fd5377;

TAILWIND

colors: {
  'brand-1': '#307563',
  'brand-2': '#57afa1',
  'brand-3': '#94c7be',
  'brand-4': '#e9cdb8',
  'brand-5': '#fd5377',
}

RGB Array

[48, 117, 99], [87, 175, 161], [148, 199, 190], [233, 205, 184], [253, 83, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #307563, #57AFA1, #94C7BE, #E9CDB8, #FD5377 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: #307563; --color-2: #57afa1; --color-3: #94c7be; --color-4: #e9cdb8; --color-5: #fd5377. 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