← Back to Editor

#474577 · #507DB6 · #42ACD3 · #4AEAF6 · #ACFEFC

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

#474577

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#474577
RGB
rgb(71, 69, 119)
HSL
hsl(242, 27%, 37%)
HSB
hsb(242, 42%, 47%)
CMYK
cmyk(40%, 42%, 0%, 53%)
Oklch
oklch(41.6% 0.082 284.0)

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

#507DB6

Azure · SteelBlue · Navy Blue

HEX
#507DB6
RGB
rgb(80, 125, 182)
HSL
hsl(214, 41%, 51%)
HSB
hsb(214, 56%, 71%)
CMYK
cmyk(56%, 31%, 0%, 29%)
Oklch
oklch(58.2% 0.101 255.0)

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

#42ACD3

Lake Blue · MediumTurquoise · Lake Green

HEX
#42ACD3
RGB
rgb(66, 172, 211)
HSL
hsl(196, 62%, 54%)
HSB
hsb(196, 69%, 83%)
CMYK
cmyk(69%, 18%, 0%, 17%)
Oklch
oklch(70.0% 0.111 226.3)

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

#4AEAF6

Sky Blue · Turquoise · Lake Green

HEX
#4AEAF6
RGB
rgb(74, 234, 246)
HSL
hsl(184, 91%, 63%)
HSB
hsb(184, 70%, 96%)
CMYK
cmyk(70%, 5%, 0%, 4%)
Oklch
oklch(86.1% 0.130 202.4)

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

#ACFEFC

Jade · LightBlue · Glacier Blue

HEX
#ACFEFC
RGB
rgb(172, 254, 252)
HSL
hsl(179, 98%, 84%)
HSB
hsb(179, 32%, 100%)
CMYK
cmyk(32%, 0%, 1%, 0%)
Oklch
oklch(94.4% 0.080 193.9)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

474577
767845

Analogous

455D78
474577
604578

Triadic

474577
784745
457847

Split-Comp.

474577
786045
5D7845

Tetradic

474577
78455D
767845
457860

Contrast Matrix WCAG 2.1 Contrast

474577
507DB6
42ACD3
4AEAF6
ACFEFC
—
2.1
Fail
3.4
AA Large
6.0
AA
7.7
AAA
2.1
Fail
—
1.6
Fail
2.9
Fail
3.7
AA Large
3.4
AA Large
1.6
Fail
—
1.8
Fail
2.3
Fail
6.0
AA
2.9
Fail
1.8
Fail
—
1.3
Fail
7.7
AAA
3.7
AA Large
2.3
Fail
1.3
Fail
—
White BG
8.8AAA
4.2AA Large
2.6Fail
1.5Fail
1.1Fail
Black BG
2.4Fail
5.0AA
8.1AAA
14.4AAA
18.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

46466B
6364A8
7071CA
8F91F3
D0D0FC

Deuteranopia

464668
615EA5
6A62C7
867AF2
CBC5FD

Tritanopia

47615F
529D9B
47C2C0
52F1F0
B0FDFD

Achromatopsia

4B4B4B
767676
919191
BCBCBC
E5E5E5

Shades & Tints Shades & Tints

#474577

Dark
Light

#507DB6

Dark
Light

#42ACD3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #474577;
  --color-2: #507db6;
  --color-3: #42acd3;
  --color-4: #4aeaf6;
  --color-5: #acfefc;
}

SCSS

$color-1: #474577;
$color-2: #507db6;
$color-3: #42acd3;
$color-4: #4aeaf6;
$color-5: #acfefc;

TAILWIND

colors: {
  'brand-1': '#474577',
  'brand-2': '#507db6',
  'brand-3': '#42acd3',
  'brand-4': '#4aeaf6',
  'brand-5': '#acfefc',
}

RGB Array

[71, 69, 119], [80, 125, 182], [66, 172, 211], [74, 234, 246], [172, 254, 252]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #474577, #507DB6, #42ACD3, #4AEAF6, #ACFEFC is ideal for: social media posters, mobile apps, e-commerce promos, 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: #474577; --color-2: #507db6; --color-3: #42acd3; --color-4: #4aeaf6; --color-5: #acfefc. 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 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