← Back to Editor

#A9B8CC · #2CE6FF · #18D4FA · #04C2F4 · #8B97A7

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 App

Color Details Color Details

#A9B8CC

Azure · LightSteelBlue · Cobalt Blue

HEX
#A9B8CC
RGB
rgb(169, 184, 204)
HSL
hsl(214, 26%, 73%)
HSB
hsb(214, 17%, 80%)
CMYK
cmyk(17%, 10%, 0%, 20%)
Oklch
oklch(77.7% 0.033 255.6)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#2CE6FF

Lake Blue · Cyan · Lake Green

HEX
#2CE6FF
RGB
rgb(44, 230, 255)
HSL
hsl(187, 100%, 59%)
HSB
hsb(187, 83%, 100%)
CMYK
cmyk(83%, 10%, 0%, 0%)
Oklch
oklch(85.0% 0.140 209.3)

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

#18D4FA

Lake Blue · DeepSkyBlue · Lake Green

HEX
#18D4FA
RGB
rgb(24, 212, 250)
HSL
hsl(190, 96%, 54%)
HSB
hsb(190, 90%, 98%)
CMYK
cmyk(90%, 15%, 0%, 2%)
Oklch
oklch(80.3% 0.141 217.3)

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

#04C2F4

Lake Blue · DeepSkyBlue · Mint Ice

HEX
#04C2F4
RGB
rgb(4, 194, 244)
HSL
hsl(193, 97%, 49%)
HSB
hsb(193, 98%, 96%)
CMYK
cmyk(98%, 20%, 0%, 4%)
Oklch
oklch(75.7% 0.143 225.0)

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

#8B97A7

Azure · LightSlateGray · Navy Blue

HEX
#8B97A7
RGB
rgb(139, 151, 167)
HSL
hsl(214, 14%, 60%)
HSB
hsb(214, 17%, 65%)
CMYK
cmyk(17%, 10%, 0%, 35%)
Oklch
oklch(67.2% 0.027 255.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A9B8CC
CCBDA8

Analogous

A8CACC
A9B8CC
ABA8CC

Triadic

A9B8CC
CCA8B8
B8CCA8

Split-Comp.

A9B8CC
CCABA8
CACCA8

Tetradic

A9B8CC
CCA8CA
CCBDA8
A8CCAB

Contrast Matrix WCAG 2.1 Contrast

A9B8CC
2CE6FF
18D4FA
04C2F4
8B97A7
—
1.3
Fail
1.1
Fail
1.0
Fail
1.5
Fail
1.3
Fail
—
1.2
Fail
1.4
Fail
2.0
Fail
1.1
Fail
1.2
Fail
—
1.2
Fail
1.7
Fail
1.0
Fail
1.4
Fail
1.2
Fail
—
1.4
Fail
1.5
Fail
2.0
Fail
1.7
Fail
1.4
Fail
—
White BG
2.0Fail
1.5Fail
1.8Fail
2.1Fail
3.0Fail
Black BG
10.4AAA
13.9AAA
11.8AAA
10.0AAA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFB0C7
7D7EF9
696BF1
5658E8
9090A3

Deuteranopia

AFAEC6
7264F8
5F50EF
4B3DE5
908FA2

Tritanopia

AAC3C3
35F4F3
21EAE8
0EDEDC
8CA09F

Achromatopsia

B6B6B6
B1B1B1
A0A0A0
8F8F8F
959595

Shades & Tints Shades & Tints

#A9B8CC

Dark
Light

#2CE6FF

Dark
Light

#18D4FA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a9b8cc;
  --color-2: #2ce6ff;
  --color-3: #18d4fa;
  --color-4: #04c2f4;
  --color-5: #8b97a7;
}

SCSS

$color-1: #a9b8cc;
$color-2: #2ce6ff;
$color-3: #18d4fa;
$color-4: #04c2f4;
$color-5: #8b97a7;

TAILWIND

colors: {
  'brand-1': '#a9b8cc',
  'brand-2': '#2ce6ff',
  'brand-3': '#18d4fa',
  'brand-4': '#04c2f4',
  'brand-5': '#8b97a7',
}

RGB Array

[169, 184, 204], [44, 230, 255], [24, 212, 250], [4, 194, 244], [139, 151, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #A9B8CC, #2CE6FF, #18D4FA, #04C2F4, #8B97A7 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: #a9b8cc; --color-2: #2ce6ff; --color-3: #18d4fa; --color-4: #04c2f4; --color-5: #8b97a7. 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