← Back to Editor

#0B556B · #30758A · #78868A · #9DA6A8 · #D3E3E8

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#0B556B

Lake Blue · DarkSlateGray · Peacock Green

HEX
#0B556B
RGB
rgb(11, 85, 107)
HSL
hsl(194, 81%, 23%)
HSB
hsb(194, 90%, 42%)
CMYK
cmyk(90%, 21%, 0%, 58%)
Oklch
oklch(41.9% 0.075 224.3)

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

#30758A

Slate Blue · SteelBlue · Mint Ice

HEX
#30758A
RGB
rgb(48, 117, 138)
HSL
hsl(194, 48%, 36%)
HSB
hsb(194, 65%, 54%)
CMYK
cmyk(65%, 15%, 0%, 46%)
Oklch
oklch(52.8% 0.076 221.1)

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

#78868A

Ash · SlateGray · Warm Gray

HEX
#78868A
RGB
rgb(120, 134, 138)
HSL
hsl(193, 7%, 51%)
HSB
hsb(193, 13%, 54%)
CMYK
cmyk(13%, 3%, 0%, 46%)
Oklch
oklch(61.0% 0.017 216.8)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#9DA6A8

Ash · DarkGray · Silver Sand

HEX
#9DA6A8
RGB
rgb(157, 166, 168)
HSL
hsl(191, 6%, 64%)
HSB
hsb(191, 7%, 66%)
CMYK
cmyk(7%, 1%, 0%, 34%)
Oklch
oklch(71.9% 0.011 212.5)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#D3E3E8

Sky Blue · Lavender · Glacier Blue

HEX
#D3E3E8
RGB
rgb(211, 227, 232)
HSL
hsl(194, 31%, 87%)
HSB
hsb(194, 9%, 91%)
CMYK
cmyk(9%, 2%, 0%, 9%)
Oklch
oklch(90.5% 0.018 218.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0B556B
6A210B

Analogous

0B6A51
0B556B
0B246A

Triadic

0B556B
6A0B54
546A0B

Split-Comp.

0B556B
6A0B24
6A510B

Tetradic

0B556B
510B6A
6A210B
246A0B

Contrast Matrix WCAG 2.1 Contrast

0B556B
30758A
78868A
9DA6A8
D3E3E8
—
1.6
Fail
2.2
Fail
3.3
AA Large
6.3
AA
1.6
Fail
—
1.4
Fail
2.1
Fail
3.9
AA Large
2.2
Fail
1.4
Fail
—
1.5
Fail
2.9
Fail
3.3
AA Large
2.1
Fail
1.5
Fail
—
1.9
Fail
6.3
AA
3.9
AA Large
2.9
Fail
1.9
Fail
—
White BG
8.3AAA
5.2AA
3.8AA Large
2.5Fail
1.3Fail
Black BG
2.5Fail
4.0AA Large
5.6AA
8.5AAA
15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2C66
4E4E85
7E7E89
A1A1A8
DADAE7

Deuteranopia

272164
4A4584
7D7C89
A0A0A7
D9D8E6

Tritanopia

0F6161
338180
798888
9DA7A7
D4E6E6

Achromatopsia

414141
636363
828282
A4A4A4
DFDFDF

Shades & Tints Shades & Tints

#0B556B

Dark
Light

#30758A

Dark
Light

#78868A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0b556b;
  --color-2: #30758a;
  --color-3: #78868a;
  --color-4: #9da6a8;
  --color-5: #d3e3e8;
}

SCSS

$color-1: #0b556b;
$color-2: #30758a;
$color-3: #78868a;
$color-4: #9da6a8;
$color-5: #d3e3e8;

TAILWIND

colors: {
  'brand-1': '#0b556b',
  'brand-2': '#30758a',
  'brand-3': '#78868a',
  'brand-4': '#9da6a8',
  'brand-5': '#d3e3e8',
}

RGB Array

[11, 85, 107], [48, 117, 138], [120, 134, 138], [157, 166, 168], [211, 227, 232]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #0B556B, #30758A, #78868A, #9DA6A8, #D3E3E8 is ideal for: 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: #0b556b; --color-2: #30758a; --color-3: #78868a; --color-4: #9da6a8; --color-5: #d3e3e8. 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. 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