Using Ocean Blue in design
HEX
#0077BE
RGB
0, 119, 190
HSL
202°, 100%, 37%
HSV
202°, 100%, 75%
The blue people trust for water imagery — deep enough to feel wet, bright enough to stay legible on white. #0077BE carries vacation and hydration cues without neon exaggeration. A workhorse for marine and beverage categories.
Best for
Conference materials, keynote visuals, and thought-leadership content.
Accessibility
Ocean Blue text on white passes AA at 4.79:1, which makes it usable for headings and short labels.
How does ocean blue compare to nearby colors?
What is the difference between ocean blue and denim?
Ocean Blue (#0077BE) looks cleaner and more charged than Denim (#1560BD) when the two are shown together. Ocean Blue and Denim can fill many of the same slots, but one steers the palette toward aqua-blue undertones and the other toward blue-ink undertones. Begin with ocean blue when the family needs its current undertone and surface character; keep denim for the nearby alternative that shifts the mood without leaving the same hue neighborhood.
What color is ocean blue?
Widely used in travel, bottled water, maritime safety graphics, and environmental nonprofits. "Ocean blue" is a common marketing descriptor rather than a single standardized pigment.
What is the hex code for ocean blue?
| Format | Value |
|---|---|
| HEX | #0077BE |
| RGB | rgb(0, 119, 190) |
| HSL | hsl(202°, 100%, 37%) |
| HSV / HSB | hsv(202°, 100%, 75%) |
| CMYK (approx.) | cmyk(100%, 37%, 0%, 25%) |
Convert Ocean Blue to other color formats
Open the color converter with Ocean Blue (#0077BE) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Ocean Blue in the color converter →What does ocean blue mean in design?
Ocean blue is often associated with depth, refreshment, and coastal escape. Beside cerulean or azure, it tends to read as more aquatic and travel-specific.
How do I use ocean blue in code?
| CSS (hex) | color: #0077BE; |
| CSS (rgb) | color: rgb(0, 119, 190); |
| CSS (hsl) | color: hsl(202, 100%, 37%); |
| RGB % | rgb(0%, 47%, 75%) |
| Tailwind | text-[#0077BE] |
| SwiftUI | Color(red: 0.000, green: 0.467, blue: 0.745) |
| UIKit | UIColor(red: 0.000, green: 0.467, blue: 0.745, alpha: 1.0) |
| Android | Color.rgb(0, 119, 190) |
| Compose | Color(0xFF0077BE) |
| Web Safe | #0066CC |
Is ocean blue accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 4.79:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| AaBlack text on this color | 4.38:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| AaThis color as text on white | 4.79:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| AaThis color as text on black | 4.38:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does ocean blue look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with ocean blue
White helps ocean blue stay legible in charts, labels, and UI states where a muddier light neutral would blur the edges.
Gold warms ocean blue enough to keep the palette from feeling chilly or overly technical, while still reading intentional rather than decorative-for-its-own-sake.
Cream takes the hard digital edge off ocean blue and makes the color feel more printed, paper-backed, and approachable.
What colors clash with ocean blue
With ocean blue, Neon Green pulls the palette toward LED signage and away from the signal-blue quality that makes the source color usable.
Magenta remaps ocean blue too aggressively, dragging it away from app UI, charts, and digital-native branding and into a brighter, more performative palette.
With ocean blue, orange creates a warm-cool collision that announces itself before it earns a compositional reason to exist.
Pastel Pink can make ocean blue feel softer and sweeter than intended, which weakens palettes that rely on gravity or structure.
How should I use ocean blue in design?
- •Use ocean blue for headlines, sidebar accents, and key data points where you need strong presence without going full dark-mode.
- •Warm touches like gold or coral bring out ocean blue's cooler character by contrast, while staying with cool neighbors creates a calmer, more unified feel.
- •Ocean Blue's high saturation makes it most effective in small doses — buttons, chart highlights, notification badges, and social media accents.
What are good ocean blue palettes?
Midnight authority
Conference materials, keynote visuals, and thought-leadership content.
Soft structure
Nonprofit campaigns, fundraising pages, and grant materials.
Design with ocean blue in Moda
Create a presentation or document using ocean blue as your accent color. Moda's AI applies your color palette automatically.
Create a design with ocean blue →What are the shades and tints of ocean blue?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for ocean blue?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Cerulean
Cerulean is near enough to ocean blue to swap into the same palette, yet the undertone shift still decides whether the family reads warmer or cooler overall.
Denim
Denim sits close to ocean blue on the wheel, but it carries less chroma, which makes it better for steadier surfaces and calmer long-form use than for sharper emphasis and quicker visual pickup.
Sapphire
Sapphire is nearly adjacent to ocean blue in hue; what separates them is intensity, with sapphire reading dustier and easier to extend across a layout.
Cobalt
Cobalt lives in the same neighborhood as ocean blue, but the finish shift is enough to make one feel better for enterprise, finance, and tailored corporate systems and the other for app UI, charts, and digital-native branding.
Azure
Azure tracks close to ocean blue in hue, but the value shift changes where each one earns its place: azure is easier to use for backgrounds, tints, and softer supporting areas, while ocean blue holds onto accents, stronger hierarchy, and firmer structure.
Frequently asked questions
What is the hex code for ocean blue?
The hex code for ocean blue is #0077BE. In RGB, that's 0 red, 119 green, and 190 blue. The approximate CMYK equivalent is 100% cyan, 37% magenta, 0% yellow, and 25% key (black).
Is ocean blue a warm or cool color?
Ocean Blue falls on the cool side of the palette, so warm companions create the clearest contrast while other cool tones keep the system more restrained.
Should ocean blue lead the palette or stay in supporting roles?
Ocean Blue has enough chroma to take the lead, but it usually performs best when the surrounding system stays quieter. Treat it as the voice of emphasis, not the answer to every layout need.
Where does ocean blue work best in a layout?
Ocean Blue carries a lot of chroma, so it is usually strongest as punctuation rather than wallpaper. Use it for focal accents and let low-saturation surfaces do the balancing.
Is ocean blue accessible?
Ocean Blue can work as text on white at 4.79:1 contrast, but it is usually safest in headings, labels, and accent moments rather than long body copy.
More blue colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Blue colors
Compare ocean blue with other blue tones.
Green colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Purple colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.