← Back to Editor

#14A7CD · #7AD4F4 · #A1E0FB · #CCE9EE · #FAFAED

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

#14A7CD

Lake Blue · LightSeaGreen · Mint Ice

HEX
#14A7CD
RGB
rgb(20, 167, 205)
HSL
hsl(192, 82%, 44%)
HSB
hsb(192, 90%, 80%)
CMYK
cmyk(90%, 19%, 0%, 20%)
Oklch
oklch(67.6% 0.122 222.3)

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

#7AD4F4

Sky Blue · LightSkyBlue · Lake Green

HEX
#7AD4F4
RGB
rgb(122, 212, 244)
HSL
hsl(196, 85%, 72%)
HSB
hsb(196, 50%, 96%)
CMYK
cmyk(50%, 13%, 0%, 4%)
Oklch
oklch(82.5% 0.097 223.2)

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

#A1E0FB

Sky Blue · LightBlue · Glacier Blue

HEX
#A1E0FB
RGB
rgb(161, 224, 251)
HSL
hsl(198, 92%, 81%)
HSB
hsb(198, 36%, 98%)
CMYK
cmyk(36%, 11%, 0%, 2%)
Oklch
oklch(87.3% 0.074 226.4)

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

#CCE9EE

Sky Blue · Lavender · Glacier Blue

HEX
#CCE9EE
RGB
rgb(204, 233, 238)
HSL
hsl(189, 50%, 87%)
HSB
hsb(189, 14%, 93%)
CMYK
cmyk(14%, 2%, 0%, 7%)
Oklch
oklch(91.4% 0.031 209.1)

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

#FAFAED

Fresh Green · SeaShell · Lemon Cream

HEX
#FAFAED
RGB
rgb(250, 250, 237)
HSL
hsl(60, 57%, 95%)
HSB
hsb(60, 5%, 98%)
CMYK
cmyk(0%, 0%, 5%, 2%)
Oklch
oklch(98.2% 0.017 106.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

14A7CD
CC3914

Analogous

14CC95
14A7CD
144BCC

Triadic

14A7CD
CC14A7
A7CC14

Split-Comp.

14A7CD
CC144B
CC9514

Tetradic

14A7CD
9514CC
CC3914
4BCC14

Contrast Matrix WCAG 2.1 Contrast

14A7CD
7AD4F4
A1E0FB
CCE9EE
FAFAED
—
1.7
Fail
2.0
Fail
2.2
Fail
2.7
Fail
1.7
Fail
—
1.2
Fail
1.3
Fail
1.6
Fail
2.0
Fail
1.2
Fail
—
1.1
Fail
1.4
Fail
2.2
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
2.7
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
White BG
2.8Fail
1.7Fail
1.4Fail
1.3Fail
1.1Fail
Black BG
7.4AAA
12.6AAA
14.6AAA
16.5AAA
20.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5455C4
A1A2EC
BCBDF4
D9D9ED
FAFAF0

Deuteranopia

4B40C2
9C95EA
B9B4F3
D7D5ED
FAFAF1

Tritanopia

1BBDBB
7FE6E5
A4EFEE
CDECEC
FAF3F3

Achromatopsia

7F7F7F
BDBDBD
D0D0D0
E1E1E1
F9F9F9

Shades & Tints Shades & Tints

#14A7CD

Dark
Light

#7AD4F4

Dark
Light

#A1E0FB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #14a7cd;
  --color-2: #7ad4f4;
  --color-3: #a1e0fb;
  --color-4: #cce9ee;
  --color-5: #fafaed;
}

SCSS

$color-1: #14a7cd;
$color-2: #7ad4f4;
$color-3: #a1e0fb;
$color-4: #cce9ee;
$color-5: #fafaed;

TAILWIND

colors: {
  'brand-1': '#14a7cd',
  'brand-2': '#7ad4f4',
  'brand-3': '#a1e0fb',
  'brand-4': '#cce9ee',
  'brand-5': '#fafaed',
}

RGB Array

[20, 167, 205], [122, 212, 244], [161, 224, 251], [204, 233, 238], [250, 250, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #14A7CD, #7AD4F4, #A1E0FB, #CCE9EE, #FAFAED is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #14a7cd; --color-2: #7ad4f4; --color-3: #a1e0fb; --color-4: #cce9ee; --color-5: #fafaed. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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