← Back to Editor

#31628A · #55A2CA · #84D1E9 · #F2CF59 · #F77942

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

#31628A

Slate Blue · DarkSlateBlue · Prussian Blue

HEX
#31628A
RGB
rgb(49, 98, 138)
HSL
hsl(207, 48%, 37%)
HSB
hsb(207, 64%, 54%)
CMYK
cmyk(64%, 29%, 0%, 46%)
Oklch
oklch(48.0% 0.084 245.4)

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

#55A2CA

Lake Blue · CornflowerBlue · Navy Blue

HEX
#55A2CA
RGB
rgb(85, 162, 202)
HSL
hsl(201, 52%, 56%)
HSB
hsb(201, 58%, 79%)
CMYK
cmyk(58%, 20%, 0%, 21%)
Oklch
oklch(67.9% 0.096 233.3)

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

#84D1E9

Sky Blue · SkyBlue · Lake Green

HEX
#84D1E9
RGB
rgb(132, 209, 233)
HSL
hsl(194, 70%, 72%)
HSB
hsb(194, 43%, 91%)
CMYK
cmyk(43%, 10%, 0%, 9%)
Oklch
oklch(81.9% 0.083 219.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#F2CF59

Ginger · SandyBrown · Sunflower

HEX
#F2CF59
RGB
rgb(242, 207, 89)
HSL
hsl(46, 85%, 65%)
HSB
hsb(46, 63%, 95%)
CMYK
cmyk(0%, 14%, 63%, 5%)
Oklch
oklch(86.3% 0.141 92.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F77942

Apricot · Coral · Warm Sun

HEX
#F77942
RGB
rgb(247, 121, 66)
HSL
hsl(18, 92%, 61%)
HSB
hsb(18, 73%, 97%)
CMYK
cmyk(0%, 51%, 73%, 3%)
Oklch
oklch(71.4% 0.169 42.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

31628A
8C5A31

Analogous

318C87
31628A
31368C

Triadic

31628A
8C3163
638C31

Split-Comp.

31628A
8C3136
8C8731

Tetradic

31628A
87318C
8C5A31
368C31

Contrast Matrix WCAG 2.1 Contrast

31628A
55A2CA
84D1E9
F2CF59
F77942
—
2.3
Fail
3.8
AA Large
4.3
AA Large
2.4
Fail
2.3
Fail
—
1.7
Fail
1.9
Fail
1.0
Fail
3.8
AA Large
1.7
Fail
—
1.1
Fail
1.6
Fail
4.3
AA Large
1.9
Fail
1.1
Fail
—
1.8
Fail
2.4
Fail
1.0
Fail
1.6
Fail
1.8
Fail
—
White BG
6.5AA
2.8Fail
1.7Fail
1.5Fail
2.7Fail
Black BG
3.2AA Large
7.4AAA
12.3AAA
13.8AAA
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

464780
7677C0
A5A6E3
E3E376
C0BF4F

Deuteranopia

43407E
726CBE
A19BE2
E5E77C
C8D153

Tritanopia

337977
59B9B7
88DFDE
F08C91
F15A5C

Achromatopsia

585858
909090
BDBDBD
CCCCCC
989898

Shades & Tints Shades & Tints

#31628A

Dark
Light

#55A2CA

Dark
Light

#84D1E9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #31628a;
  --color-2: #55a2ca;
  --color-3: #84d1e9;
  --color-4: #f2cf59;
  --color-5: #f77942;
}

SCSS

$color-1: #31628a;
$color-2: #55a2ca;
$color-3: #84d1e9;
$color-4: #f2cf59;
$color-5: #f77942;

TAILWIND

colors: {
  'brand-1': '#31628a',
  'brand-2': '#55a2ca',
  'brand-3': '#84d1e9',
  'brand-4': '#f2cf59',
  'brand-5': '#f77942',
}

RGB Array

[49, 98, 138], [85, 162, 202], [132, 209, 233], [242, 207, 89], [247, 121, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #31628A, #55A2CA, #84D1E9, #F2CF59, #F77942 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: #31628a; --color-2: #55a2ca; --color-3: #84d1e9; --color-4: #f2cf59; --color-5: #f77942. 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