← Back to Editor

#87ECE2 · #FF583E · #F43F82 · #D76CA2 · #B289AF

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#87ECE2

Jade · SkyBlue · Lake Green

HEX
#87ECE2
RGB
rgb(135, 236, 226)
HSL
hsl(174, 73%, 73%)
HSB
hsb(174, 43%, 93%)
CMYK
cmyk(43%, 0%, 4%, 7%)
Oklch
oklch(87.9% 0.096 187.4)

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

#FF583E

Peach Pink · Tomato · Coral Red

HEX
#FF583E
RGB
rgb(255, 88, 62)
HSL
hsl(8, 100%, 62%)
HSB
hsb(8, 76%, 100%)
CMYK
cmyk(0%, 65%, 76%, 0%)
Oklch
oklch(68.2% 0.207 31.5)

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

#F43F82

Dark Violet · DeepPink · Rose Pink

HEX
#F43F82
RGB
rgb(244, 63, 130)
HSL
hsl(338, 89%, 60%)
HSB
hsb(338, 74%, 96%)
CMYK
cmyk(0%, 74%, 47%, 4%)
Oklch
oklch(65.4% 0.220 3.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#D76CA2

Rouge · LightCoral · Rose Pink

HEX
#D76CA2
RGB
rgb(215, 108, 162)
HSL
hsl(330, 57%, 63%)
HSB
hsb(330, 50%, 84%)
CMYK
cmyk(0%, 50%, 25%, 16%)
Oklch
oklch(67.2% 0.147 350.2)

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

#B289AF

Mauve · DarkGray · Lilac Purple

HEX
#B289AF
RGB
rgb(178, 137, 175)
HSL
hsl(304, 21%, 62%)
HSB
hsb(304, 23%, 70%)
CMYK
cmyk(0%, 23%, 2%, 30%)
Oklch
oklch(68.1% 0.072 328.8)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87ECE2
EC8892

Analogous

88ECB0
87ECE2
88C4EC

Triadic

87ECE2
E288EC
ECE288

Split-Comp.

87ECE2
EC88C4
ECB088

Tetradic

87ECE2
B088EC
EC8892
C4EC88

Contrast Matrix WCAG 2.1 Contrast

87ECE2
FF583E
F43F82
D76CA2
B289AF
—
2.3
Fail
2.6
Fail
2.3
Fail
2.1
Fail
2.3
Fail
—
1.1
Fail
1.0
Fail
1.1
Fail
2.6
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
2.3
Fail
1.0
Fail
1.1
Fail
—
1.1
Fail
2.1
Fail
1.1
Fail
1.2
Fail
1.1
Fail
—
White BG
1.4Fail
3.1AA Large
3.6AA Large
3.2AA Large
3.0Fail
Black BG
15.1AAA
6.7AA
5.9AA
6.6AA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B4E4
B7B544
A6A472
A9A895
A0A0A6

Deuteranopia

ADA5E5
C0CD46
B0BE6E
AFB792
A3A6A4

Tritanopia

8CE6E7
F7494A
EB6562
D28B88
B09F9D

Achromatopsia

CDCDCD
878787
7D7D7D
929292
9A9A9A

Shades & Tints Shades & Tints

#87ECE2

Dark
Light

#FF583E

Dark
Light

#F43F82

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87ece2;
  --color-2: #ff583e;
  --color-3: #f43f82;
  --color-4: #d76ca2;
  --color-5: #b289af;
}

SCSS

$color-1: #87ece2;
$color-2: #ff583e;
$color-3: #f43f82;
$color-4: #d76ca2;
$color-5: #b289af;

TAILWIND

colors: {
  'brand-1': '#87ece2',
  'brand-2': '#ff583e',
  'brand-3': '#f43f82',
  'brand-4': '#d76ca2',
  'brand-5': '#b289af',
}

RGB Array

[135, 236, 226], [255, 88, 62], [244, 63, 130], [215, 108, 162], [178, 137, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #87ECE2, #FF583E, #F43F82, #D76CA2, #B289AF is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #87ece2; --color-2: #ff583e; --color-3: #f43f82; --color-4: #d76ca2; --color-5: #b289af. 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 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