← Back to Editor

#71B6DF · #9EB589 · #CFE5F6 · #D8D087 · #3178B6

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#71B6DF

Sky Blue · SkyBlue · Cobalt Blue

HEX
#71B6DF
RGB
rgb(113, 182, 223)
HSL
hsl(202, 63%, 66%)
HSB
hsb(202, 49%, 87%)
CMYK
cmyk(49%, 18%, 0%, 13%)
Oklch
oklch(74.6% 0.092 235.9)

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

#9EB589

Celadon · DarkSeaGreen · Apple Green

HEX
#9EB589
RGB
rgb(158, 181, 137)
HSL
hsl(91, 23%, 62%)
HSB
hsb(91, 24%, 71%)
CMYK
cmyk(13%, 0%, 24%, 29%)
Oklch
oklch(74.4% 0.066 130.3)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#CFE5F6

Sky Blue · Lavender · Sky Blue

HEX
#CFE5F6
RGB
rgb(207, 229, 246)
HSL
hsl(206, 68%, 89%)
HSB
hsb(206, 16%, 96%)
CMYK
cmyk(16%, 7%, 0%, 4%)
Oklch
oklch(91.1% 0.033 241.1)

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

#D8D087

Fresh Green · BurlyWood · Sunflower

HEX
#D8D087
RGB
rgb(216, 208, 135)
HSL
hsl(54, 51%, 69%)
HSB
hsb(54, 38%, 85%)
CMYK
cmyk(0%, 4%, 38%, 15%)
Oklch
oklch(84.7% 0.094 102.8)

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

#3178B6

Lake Blue · SteelBlue · Navy Blue

HEX
#3178B6
RGB
rgb(49, 120, 182)
HSL
hsl(208, 58%, 45%)
HSB
hsb(208, 73%, 71%)
CMYK
cmyk(73%, 34%, 0%, 29%)
Oklch
oklch(55.8% 0.120 248.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

71B6DF
DF9A72

Analogous

72DFD0
71B6DF
7280DF

Triadic

71B6DF
DF72B7
B7DF72

Split-Comp.

71B6DF
DF7280
DFD072

Tetradic

71B6DF
D072DF
DF9A72
80DF72

Contrast Matrix WCAG 2.1 Contrast

71B6DF
9EB589
CFE5F6
D8D087
3178B6
—
1.0
Fail
1.7
Fail
1.4
Fail
2.1
Fail
1.0
Fail
—
1.7
Fail
1.4
Fail
2.1
Fail
1.7
Fail
1.7
Fail
—
1.2
Fail
3.6
AA Large
1.4
Fail
1.4
Fail
1.2
Fail
—
3.0
Fail
2.1
Fail
2.1
Fail
3.6
AA Large
3.0
Fail
—
White BG
2.2Fail
2.2Fail
1.3Fail
1.6Fail
4.7AA
Black BG
9.5AAA
9.4AAA
16.2AAA
13.3AAA
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8FD5
A8A894
D9D9F2
D5D499
5050A7

Deuteranopia

8B86D3
A7A596
D7D6F1
D5D69D
4C46A3

Tritanopia

74CDCC
9F9C9E
D0EFEE
D8A7AA
359B99

Achromatopsia

A6A6A6
A9A9A9
E0E0E0
CACACA
6A6A6A

Shades & Tints Shades & Tints

#71B6DF

Dark
Light

#9EB589

Dark
Light

#CFE5F6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #71b6df;
  --color-2: #9eb589;
  --color-3: #cfe5f6;
  --color-4: #d8d087;
  --color-5: #3178b6;
}

SCSS

$color-1: #71b6df;
$color-2: #9eb589;
$color-3: #cfe5f6;
$color-4: #d8d087;
$color-5: #3178b6;

TAILWIND

colors: {
  'brand-1': '#71b6df',
  'brand-2': '#9eb589',
  'brand-3': '#cfe5f6',
  'brand-4': '#d8d087',
  'brand-5': '#3178b6',
}

RGB Array

[113, 182, 223], [158, 181, 137], [207, 229, 246], [216, 208, 135], [49, 120, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #71B6DF, #9EB589, #CFE5F6, #D8D087, #3178B6 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: #71b6df; --color-2: #9eb589; --color-3: #cfe5f6; --color-4: #d8d087; --color-5: #3178b6. 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