Ocean Boat Blue

Meet Ocean Boat Blue (#0077BE), a shade that commands attention with its pure, saturated hue. This vibrant blue offers a striking clarity, making it a compelling choice for modern digital interfaces and a strong voice in any design palette.

What color is Ocean Boat Blue?

What is the meaning of Ocean Boat Blue?

How do I use Ocean Boat Blue (#0077BE) in UI design?

Using Ocean Boat Blue color codes

Ocean Boat Blue

#0077BE

Access our full UI & UX library today.

What color is Ocean Boat Blue?

What is the meaning of Ocean Boat Blue?

How do I use Ocean Boat Blue (#0077BE) in UI design?

Using Ocean Boat Blue color codes

Ocean Boat Blue Code Conversions

HEX

#0077BE

LAB

48, -1, -45

RGB

0, 119, 190

XYZ

15.9, 16.9, 51.1

HSL

202°, 100%, 37%

LCH

48, 45, 269°

HSB

202°, 100%, 75%

LUV

48, -30, -68

CMYK

100, 37, 0, 25

CMYK

100, 37, 0, 25

HWB

202°, 0%, 25%

Ocean Boat Blue Color Harmonies

Analogous

Analogous colors sit next to Ocean Boat Blue on the color wheel, creating a harmonious and visually pleasing palette with a serene effect.

#00BEA6

#0077BE

#0018BE

#00BEA6

#0077BE

#0018BE

Complementary

Complementary colors are opposites on the color wheel. For Ocean Boat Blue, its complement creates a striking, high-contrast pairing that makes both colors pop.

#0077BE

#BE4700

#0077BE

#BE4700

Split Complementary

A split complementary scheme for Ocean Boat Blue uses the two colors adjacent to its direct complement, offering a vibrant yet balanced palette.

#0077BE

#BE0018

#BEA600

#0077BE

#BE0018

#BEA600

Triadic

Triadic color schemes use three hues evenly spaced on the color wheel. With Ocean Boat Blue as a base, this creates a vibrant, high-contrast palette.

#0077BE

#BE0077

#77BE00

#0077BE

#BE0077

#77BE00

Tetradic

For a vibrant palette, a tetradic scheme matches Ocean Boat Blue with its complement, plus another complementary pair, forming a rectangle on the wheel.

#0077BE

#A600BE

#BE4700

#18BE00

#0077BE

#A600BE

#BE4700

#18BE00

Square

A square color scheme uses four colors equidistant on the color wheel. With Ocean Boat Blue as a base, this creates a vibrant, high-contrast palette.

#0077BE

#A600BE

#BE4700

#18BE00

#0077BE

#A600BE

#BE4700

#18BE00

Ocean Boat Blue Contrast Simulation

Text Color

#

Background Color

#

4.79

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

Text Color

#

Background Color

#

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

4.79

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Ocean Boat Blue Color Variations

Shades

Shades of Ocean Boat Blue are made by adding black, creating darker, weightier tones.

#0077BE

#0066A3

#005588

#00446D

#003351

#002236

#00111B

#000000

#0077BE

#0066A3

#005588

#00446D

#003351

#002236

#00111B

#000000

Tints

Tints of Ocean Boat Blue are made by adding white, which produces softer, lighter values.

#0077BE

#248AC7

#499ED1

#6DB1DA

#92C5E3

#B6D8EC

#DBECF6

#FFFFFF

#0077BE

#248AC7

#499ED1

#6DB1DA

#92C5E3

#B6D8EC

#DBECF6

#FFFFFF

Tones

Adding gray to Ocean Boat Blue creates tones, which are subtler, less saturated versions.

#0077BE

#1278B5

#257AAC

#377BA3

#497C9B

#5B7D92

#6E7F89

#808080

#0077BE

#1278B5

#257AAC

#377BA3

#497C9B

#5B7D92

#6E7F89

#808080

Hues

Hues are variations of Ocean Boat Blue, differing in intensity and temperature to create specific moods.

#0077BE

#1800BE

#A600BE

#BE0047

#BE4700

#A6BE00

#18BE00

#00BE76

#0077BE

#1800BE

#A600BE

#BE0047

#BE4700

#A6BE00

#18BE00

#00BE76

What Interfaces Use Colors Like Ocean Boat Blue?

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox