Ocean & Coastal
Deep sea blues, seafoam greens, sandy neutrals, and coral accents inspired by oceans and coastal landscapes.
Design guide
Everything you need to know about Ocean & Coastal
Ocean palettes capture the full visual spectrum of water, the dark midnight navy of deep ocean through the vivid turquoise of tropical shallows to the pale seafoam of breaking waves. These colors communicate calm, depth, expansiveness, and refreshment, making them a natural choice for brands and designs seeking to evoke the sea, travel, wellness, or the clarity of water.
The Ocean Color Spectrum
The ocean palette spans a remarkable range. Deep ocean colors, midnight navy (#003153), prussian blue (#003153), dark teal (#006994), communicate depth, mystery, and power. Mid-ocean blues and teals, cobalt (#0047AB), cerulean (#007BA7), classic ocean blue (#006994), feel vivid and energetic, the blue of a sunny postcard sea. Shallow water and tropical colors, aqua (#00FFFF), turquoise (#40E0D0), seafoam (#9FE2BF), feel joyful, refreshing, and tropical. Sand and shoreline colors, warm sand (#C2B280), bleached coral (#E8D5C4), sea glass green (#A8D5B5), provide the warm neutral contrast that makes ocean blues pop.
For most design work, you will want to select from across this spectrum rather than staying entirely in the deep or shallow range. A palette with deep navy, mid-ocean blue, and light seafoam creates more visual depth and versatility than one that uses only vivid turquoise.
Ocean Palettes in Brand and Web Design
Ocean palettes are most at home in: travel and hospitality brands, particularly coastal and marine destinations; wellness and meditation apps where the calming quality of blue-green is actively therapeutic; water-adjacent products (surfing, diving, sailing, swimming); marine conservation and environmental brands; and beauty brands where the "clean" associations of water are a selling point.
For web design, ocean blues pair beautifully with warm sandy neutrals as backgrounds. A warm sand (#F5EFE0) or warm white (#FFFDF7) background with ocean blue accents creates a coastal warmth that works for lifestyle brands without feeling cold or corporate.
:root {
--ocean-deep: #003566;
--ocean-mid: #0077B6;
--ocean-aqua: #00B4D8;
--ocean-foam: #90E0EF;
--ocean-sand: #F5EFE0;
--text-on-ocean: #FFFFFF;
--text-on-sand: #003566;
}Export any palette directly as CSS variables — one click, no account needed. Generate a full scale →
Accessibility note
Ocean blues in the mid-range (#0077B6) typically achieve excellent contrast on white or light backgrounds. Lighter aquas and seafoams can fail contrast requirements for text, always verify with the Contrast Checker before using them as text colors.
Check contrast nowCommon Use Cases
Free Tools to Work with This Palette
Frequently Asked Questions
What colors make up an ocean palette?
Ocean palettes range from deep midnight navy and teal through bright aqua and turquoise to soft seafoam and pale sandy neutrals, capturing the full depth gradient of ocean water.
What is ocean blue color palette used for?
Ocean palettes are used by travel and hospitality brands, wellness apps, marine conservation organizations, swimwear companies, and any design meant to feel refreshing, fluid, or expansive.
What hex code is ocean blue?
Common ocean blue hex values include #006994 (classic ocean blue), #0077B6 (vibrant sea blue), #48CAE4 (bright aqua), and #ADE8F4 (light seafoam). The exact shade depends on depth and light.
Keep exploring
More palettes you'll probably love
Cool, calm & always in style
Blue Color Palettes →
Soft drops of pure sweetness
Pastel Color Palettes →
Rooted in nature's warmth
Earth Tone Palettes →
Pixels deserve better dressing
UI Color Schemes →
Dark side has better contrast
Dark Mode Palettes →
Curated for your vibes, bestie
Aesthetic Palettes →
Golden hour in your clipboard
Sunset Color Palettes →
404: Grey found — try green
Forest & Botanical →
Brightness cranked to illegal
Neon & Cyberpunk →
50 shades of actually useful
Monochrome & Greyscale →
Nostalgia hits different in HEX
Retro & Vintage →
Vacation mode: activated
Tropical & Summer →
Hygge but make it CSS
Nordic & Scandinavian →
Fall-ing for these colors
Autumn & Fall →
Something borrowed, something blue
Wedding & Romantic →
Enough color to cause a scene
Tutti Frutti →
The colors that built the internet
Brand Color Palettes →
Cold outside, stunning in CSS
Winter Color Palettes →
Fresh blooms for your next project
Spring Color Palettes →
Systematic beauty at scale
Design System Palettes →
Color your feelings, on purpose