← Back to Editor

#496A80 · #86B0BA · #A3C9CC · #BAD5E3 · #D1E0EB

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#496A80

Slate Blue · DimGray · Prussian Blue

HEX
#496A80
RGB
rgb(73, 106, 128)
HSL
hsl(204, 27%, 39%)
HSB
hsb(204, 43%, 50%)
CMYK
cmyk(43%, 17%, 0%, 50%)
Oklch
oklch(50.8% 0.052 238.3)

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

#86B0BA

Sky Blue · DarkGray · Lake Green

HEX
#86B0BA
RGB
rgb(134, 176, 186)
HSL
hsl(192, 27%, 63%)
HSB
hsb(192, 28%, 73%)
CMYK
cmyk(28%, 5%, 0%, 27%)
Oklch
oklch(73.0% 0.047 213.9)

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

#A3C9CC

Sky Blue · LightSteelBlue · Lake Green

HEX
#A3C9CC
RGB
rgb(163, 201, 204)
HSL
hsl(184, 29%, 72%)
HSB
hsb(184, 20%, 80%)
CMYK
cmyk(20%, 1%, 0%, 20%)
Oklch
oklch(80.9% 0.041 202.3)

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

#BAD5E3

Sky Blue · LightBlue · Sky Blue

HEX
#BAD5E3
RGB
rgb(186, 213, 227)
HSL
hsl(200, 42%, 81%)
HSB
hsb(200, 18%, 89%)
CMYK
cmyk(18%, 6%, 0%, 11%)
Oklch
oklch(85.7% 0.035 230.3)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#D1E0EB

Sky Blue · Lavender · Sky Blue

HEX
#D1E0EB
RGB
rgb(209, 224, 235)
HSL
hsl(205, 39%, 87%)
HSB
hsb(205, 11%, 92%)
CMYK
cmyk(11%, 5%, 0%, 8%)
Oklch
oklch(89.9% 0.022 239.5)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

496A80
7E5E49

Analogous

497E79
496A80
494E7E

Triadic

496A80
7E4969
697E49

Split-Comp.

496A80
7E494E
7E7949

Tetradic

496A80
79497E
7E5E49
4E7E49

Contrast Matrix WCAG 2.1 Contrast

496A80
86B0BA
A3C9CC
BAD5E3
D1E0EB
—
2.4
Fail
3.2
AA Large
3.8
AA Large
4.3
AA Large
2.4
Fail
—
1.3
Fail
1.5
Fail
1.7
Fail
3.2
AA Large
1.3
Fail
—
1.2
Fail
1.3
Fail
3.8
AA Large
1.5
Fail
1.2
Fail
—
1.1
Fail
4.3
AA Large
1.7
Fail
1.3
Fail
1.1
Fail
—
White BG
5.7AA
2.4Fail
1.8Fail
1.5Fail
1.3Fail
Black BG
3.7AA Large
8.9AAA
11.8AAA
13.7AAA
15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

57587B
9899B8
B3B4CB
C6C6E0
D7D8E8

Deuteranopia

555379
9693B7
B1AECB
C4C2DF
D7D6E8

Tritanopia

4B7676
88B6B5
A5CBCB
BBDDDC
D2E6E6

Achromatopsia

636363
A5A5A5
BEBEBE
CFCFCF
DDDDDD

Shades & Tints Shades & Tints

#496A80

Dark
Light

#86B0BA

Dark
Light

#A3C9CC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #496a80;
  --color-2: #86b0ba;
  --color-3: #a3c9cc;
  --color-4: #bad5e3;
  --color-5: #d1e0eb;
}

SCSS

$color-1: #496a80;
$color-2: #86b0ba;
$color-3: #a3c9cc;
$color-4: #bad5e3;
$color-5: #d1e0eb;

TAILWIND

colors: {
  'brand-1': '#496a80',
  'brand-2': '#86b0ba',
  'brand-3': '#a3c9cc',
  'brand-4': '#bad5e3',
  'brand-5': '#d1e0eb',
}

RGB Array

[73, 106, 128], [134, 176, 186], [163, 201, 204], [186, 213, 227], [209, 224, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #496A80, #86B0BA, #A3C9CC, #BAD5E3, #D1E0EB is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #496a80; --color-2: #86b0ba; --color-3: #a3c9cc; --color-4: #bad5e3; --color-5: #d1e0eb. 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 tech, SaaS, healthcare, eco industries. 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