← Back to Editor

#57FF7B · #00FCBD · #32C7B3 · #026475 · #001933

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#57FF7B

Emerald · LightGreen · Apple Green

HEX
#57FF7B
RGB
rgb(87, 255, 123)
HSL
hsl(133, 100%, 67%)
HSB
hsb(133, 66%, 100%)
CMYK
cmyk(66%, 0%, 52%, 0%)
Oklch
oklch(88.5% 0.223 147.2)

Traditional「Emerald」· Paint「Apple Green」· Creative Mint Breeze

#00FCBD

Mineral Blue · MediumSpringGreen · Mint Ice

HEX
#00FCBD
RGB
rgb(0, 252, 189)
HSL
hsl(165, 100%, 49%)
HSB
hsb(165, 100%, 99%)
CMYK
cmyk(100%, 0%, 25%, 1%)
Oklch
oklch(87.9% 0.181 166.6)

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

#32C7B3

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#32C7B3
RGB
rgb(50, 199, 179)
HSL
hsl(172, 60%, 49%)
HSB
hsb(172, 75%, 78%)
CMYK
cmyk(75%, 0%, 10%, 22%)
Oklch
oklch(75.0% 0.124 181.6)

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

#026475

Lake Blue · Teal · Peacock Green

HEX
#026475
RGB
rgb(2, 100, 117)
HSL
hsl(189, 97%, 23%)
HSB
hsb(189, 98%, 46%)
CMYK
cmyk(98%, 15%, 0%, 54%)
Oklch
oklch(46.3% 0.081 214.8)

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

#001933

Indigo · Black · Deep Sea Blue

HEX
#001933
RGB
rgb(0, 25, 51)
HSL
hsl(211, 100%, 10%)
HSB
hsb(211, 100%, 20%)
CMYK
cmyk(100%, 51%, 0%, 80%)
Oklch
oklch(21.1% 0.061 250.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

57FF7B
FF57DB

Analogous

86FF57
57FF7B
57FFCF

Triadic

57FF7B
7B57FF
FF7B57

Split-Comp.

57FF7B
CF57FF
FF5786

Tetradic

57FF7B
5786FF
FF57DB
FFCF57

Contrast Matrix WCAG 2.1 Contrast

57FF7B
00FCBD
32C7B3
026475
001933
—
1.0
Fail
1.6
Fail
5.2
AA
13.5
AAA
1.0
Fail
—
1.6
Fail
5.1
AA
13.2
AAA
1.6
Fail
1.6
Fail
—
3.2
AA Large
8.4
AAA
5.2
AA
5.1
AA
3.2
AA Large
—
2.6
Fail
13.5
AAA
13.2
AAA
8.4
AAA
2.6
Fail
—
White BG
1.3Fail
1.3Fail
2.1Fail
6.8AA
17.7AAA
Black BG
16.0AAA
15.7AAA
10.0AAA
3.1AA Large
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A0A19B
6D6FCC
7374B8
2C2D71
0B0B2D

Deuteranopia

9689A3
5F4CD0
6A5FB9
271F70
09082B

Tritanopia

5FB4BA
0DD8DB
39BCBD
076E6D
012827

Achromatopsia

BEBEBE
A9A9A9
989898
494949
141414

Shades & Tints Shades & Tints

#57FF7B

Dark
Light

#00FCBD

Dark
Light

#32C7B3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #57ff7b;
  --color-2: #00fcbd;
  --color-3: #32c7b3;
  --color-4: #026475;
  --color-5: #001933;
}

SCSS

$color-1: #57ff7b;
$color-2: #00fcbd;
$color-3: #32c7b3;
$color-4: #026475;
$color-5: #001933;

TAILWIND

colors: {
  'brand-1': '#57ff7b',
  'brand-2': '#00fcbd',
  'brand-3': '#32c7b3',
  'brand-4': '#026475',
  'brand-5': '#001933',
}

RGB Array

[87, 255, 123], [0, 252, 189], [50, 199, 179], [2, 100, 117], [0, 25, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #57FF7B, #00FCBD, #32C7B3, #026475, #001933 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #57ff7b; --color-2: #00fcbd; --color-3: #32c7b3; --color-4: #026475; --color-5: #001933. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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