← Back to Editor

#637987 · #9DCFC9 · #A7DBD4 · #C0EBD6 · #D1F0E1

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

#637987

Slate Blue · SlateGray · Navy Blue

HEX
#637987
RGB
rgb(99, 121, 135)
HSL
hsl(203, 15%, 46%)
HSB
hsb(203, 27%, 53%)
CMYK
cmyk(27%, 10%, 0%, 47%)
Oklch
oklch(56.4% 0.034 236.1)

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

#9DCFC9

Jade · LightSteelBlue · Lake Green

HEX
#9DCFC9
RGB
rgb(157, 207, 201)
HSL
hsl(173, 34%, 71%)
HSB
hsb(173, 24%, 81%)
CMYK
cmyk(24%, 0%, 3%, 19%)
Oklch
oklch(81.8% 0.053 187.1)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#A7DBD4

Jade · LightBlue · Glacier Blue

HEX
#A7DBD4
RGB
rgb(167, 219, 212)
HSL
hsl(172, 42%, 76%)
HSB
hsb(172, 24%, 86%)
CMYK
cmyk(24%, 0%, 3%, 14%)
Oklch
oklch(85.3% 0.054 186.0)

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

#C0EBD6

Jade · LightGray · Mint Green

HEX
#C0EBD6
RGB
rgb(192, 235, 214)
HSL
hsl(151, 52%, 84%)
HSB
hsb(151, 18%, 92%)
CMYK
cmyk(18%, 0%, 9%, 8%)
Oklch
oklch(90.4% 0.053 164.1)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#D1F0E1

Jade · LightGray · Mint Green

HEX
#D1F0E1
RGB
rgb(209, 240, 225)
HSL
hsl(151, 51%, 88%)
HSB
hsb(151, 13%, 94%)
CMYK
cmyk(13%, 0%, 6%, 6%)
Oklch
oklch(92.9% 0.038 164.8)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

637987
877164

Analogous

648783
637987
646887

Triadic

637987
876479
798764

Split-Comp.

637987
876468
878364

Tetradic

637987
836487
877164
688764

Contrast Matrix WCAG 2.1 Contrast

637987
9DCFC9
A7DBD4
C0EBD6
D1F0E1
—
2.6
Fail
3.0
Fail
3.5
AA Large
3.7
AA Large
2.6
Fail
—
1.1
Fail
1.3
Fail
1.4
Fail
3.0
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
3.5
AA Large
1.3
Fail
1.2
Fail
—
1.1
Fail
3.7
AA Large
1.4
Fail
1.3
Fail
1.1
Fail
—
White BG
4.6AA
1.7Fail
1.5Fail
1.3Fail
1.2Fail
Black BG
4.6AA
12.2AAA
13.7AAA
16.1AAA
17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6D84
B3B3CA
BEBED6
D3D3DB
DEDFE5

Deuteranopia

6B6A83
B0ACCB
BBB7D6
D0CDDC
DDDAE6

Tritanopia

648180
A0CCCC
AAD7D7
C2DFE0
D3E7E8

Achromatopsia

747474
BFBFBF
CBCBCB
DCDCDC
E5E5E5

Shades & Tints Shades & Tints

#637987

Dark
Light

#9DCFC9

Dark
Light

#A7DBD4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #637987;
  --color-2: #9dcfc9;
  --color-3: #a7dbd4;
  --color-4: #c0ebd6;
  --color-5: #d1f0e1;
}

SCSS

$color-1: #637987;
$color-2: #9dcfc9;
$color-3: #a7dbd4;
$color-4: #c0ebd6;
$color-5: #d1f0e1;

TAILWIND

colors: {
  'brand-1': '#637987',
  'brand-2': '#9dcfc9',
  'brand-3': '#a7dbd4',
  'brand-4': '#c0ebd6',
  'brand-5': '#d1f0e1',
}

RGB Array

[99, 121, 135], [157, 207, 201], [167, 219, 212], [192, 235, 214], [209, 240, 225]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #637987, #9DCFC9, #A7DBD4, #C0EBD6, #D1F0E1 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: #637987; --color-2: #9dcfc9; --color-3: #a7dbd4; --color-4: #c0ebd6; --color-5: #d1f0e1. 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