Pikka Logo Pikka
Chrome App
Deep Clear Maritime Coastal Blue Category: Blue

Ocean Blue (#0077BE) — Color Codes, Meaning & UI Palettes

Ocean Blue (#0077BE) captures the sparkling clarity of deep pelagic waters illuminated by open sunlight. It evokes boundless freedom, maritime exploration, technical trust, and oceanic vitality.

Quick Answer (Ocean Blue Color Code): The exact HEX code for Ocean Blue is #0077BE. In RGB, it is rgb(0, 119, 190). In HSL, it is hsl(202deg, 100%, 37%), and its print CMYK formulation is cmyk(100%, 37%, 0%, 25%). It has a relative luminance of 0.169 and pairs best in UI design with Pure White (#FFFFFF) and Coral Reef (#FF6B6B).
Click to Copy HEX
Ocean Blue
#0077BE
HEX
#0077BE
RGB
rgb(0, 119, 190)
HSL
hsl(202deg, 100%, 37%)
CMYK (Print)
cmyk(100%, 37%, 0%, 25%)
Apple Display P3
color(display-p3 0.000 0.467 0.745)

WCAG 2.1 Accessibility & Contrast Rating

White Text (#FFFFFF) 4.79:1 (AA)
Black Text (#000000) 4.38:1 (AA Large)

11-Step Tints & Shades Scale (Tailwind 50–950)

Mathematically balanced luminance scale for design tokens and CSS color palettes. Click any shade to copy hex code:

50
#EBF8FF
100
#D6F0FF
200
#ADE1FF
300
#7ACEFF
400
#3DB8FF
500
#0077BE
600
#00629B
700
#004E7B
800
#00395B
900
#00263C
950
#001622

Color Harmonies & Palette Schemes

Complementary

#BD4500
Opposite 180° Contrast

Analogous -30°

#00BDA4
Natural Harmony

Analogous +30°

#0019BD
Natural Harmony

Triadic +120°

#BD0078
120° Balanced Triad

Triadic +240°

#78BD00
120° Balanced Triad

Curated UI Design Pairings for Ocean Blue

Standout primary action color for travel booking portals, marine conservation, clean cloud platforms, and developer documentation.

Pure White
#FFFFFF
Crisp High-Contrast Text
Coral Reef
#FF6B6B
Energetic Marine Complement
Pale Sea Mist
#E0F2FE
Airy Card Surface
Navy Abyssal
#0F172A
Authoritative Deep Masthead

Export Ocean Blue Code Snippets

CSS Variable --color-ocean-blue: #0077BE;
Tailwind Config 'ocean-blue': '#0077BE'
Swift / SwiftUI Color(hex: "#0077BE")
JSON Design Token {"name": "Ocean Blue", "hex": "#0077BE"}

Frequently Asked Questions About Ocean Blue (#0077BE)

What is the exact HEX code for Ocean Blue?

The exact HEX code for Ocean Blue is #0077BE. In 8-digit hexadecimal (with 100% opacity), it is #0077BEFF. Its RGB decimal equivalent is rgb(0, 119, 190) and its HSL value is hsl(202deg, 100%, 37%).

What colors go best with Ocean Blue in UI and web design?

Ocean Blue pairs exceptionally well with Pure White (#FFFFFF), Coral Reef (#FF6B6B), Pale Sea Mist (#E0F2FE), and Navy Abyssal (#0F172A).

How do I use Ocean Blue in CSS and Tailwind CSS?

In standard CSS, apply it directly via color: #0077BE; or background-color: #0077BE;. In Tailwind CSS, use arbitrary value syntax like bg-[#0077be] or text-[#0077be], or define it in your Tailwind v4 @theme block as --color-ocean-blue: #0077BE;.

Is Ocean Blue WCAG accessible for readable text?

Against a pure white background (#FFFFFF), Ocean Blue achieves a contrast ratio of 4.79:1 (AA). Against a pure black background (#000000), it achieves 4.38:1 (AA Large). Check custom contrast pairings on Pikka's WCAG Contrast Checker.

Explore More Colors in the Dictionary

Browse our complete catalog of curated named colors, harmonic palettes, and accessible UI combinations.

Named Color Dictionary Interactive Color Wheel Tint & Shade Generator