The 22 Best Nautical Color Palettes: Hex Codes + AI Designs

Nautical color palettes are built for clarity: deep navies for structure, crisp whites for space, and coastal neutrals that keep layouts calm and modern.

Below are 20+ sea-ready palette combinations with HEX codes, plus real design prompts you can recreate in seconds using Media.io.

Why Nautical Palettes Work So Well

Nautical tones are naturally high-contrast and readable. Dark navy anchors typography and navigation, while whites and pale sands keep pages bright and spacious.

They also feel timeless: maritime colors are rooted in uniforms, charts, and coastal materials, so they communicate trust, craft, and direction without needing heavy decoration.

Because most nautical color schemes stay within cool blues plus warm neutrals, they’re easy to scale across branding, UI, and print while keeping a consistent visual rhythm.

20+ Nautical Color Palette Ideas (with HEX Codes)

1) Harbor Navy

HEX: #0b1f3a #123a63 #e9dfcf #b9c7d3 #c76b4b

Mood: crisp, classic, confident

Best for: brand identity for a sailing club

Crisp and classic, it evokes a quiet harbor at dawn with deep blues and sun-warmed accents. Use the navy and ocean blue as your primary base, then let sand and misty gray soften layouts. The terracotta note works well as a sparing call-to-action or badge color. Usage tip: keep text in the darkest navy for maximum contrast on light backgrounds.

Image example of harbor navy generated using media.io

Media.io

Media.io is an online AI studio for creating and editing video, image, and audio in your browser.

Try It Now for Free

2) Sailcloth Sand

HEX: #1a2f4f #2f5f86 #f3e6d2 #d7c2a5 #7a8c7a

Mood: warm, grounded, approachable

Best for: coastal cafe menu design

Warm and grounded, it feels like folded sailcloth, sun-bleached docks, and a hint of coastal greenery. Pair the sandy neutrals with the blues for a friendly, legible menu that still feels refined. The muted olive works as a subtle divider line or secondary highlight. Usage tip: use the lightest sand as the page base and reserve navy for headings to keep it airy.

Image example of sailcloth sand generated using media.io

3) Sea Glass Mist

HEX: #0e2a3a #2a6f7b #88c9c3 #d9f1ee #f2f4f6

Mood: fresh, clean, calming

Best for: spa website UI mockup

Fresh and calming, it brings to mind sea glass and fog rolling over a quiet bay. This nautical color scheme works best with teal as the hero tone and near-white as breathing room for content. Add the deep blue-green for navigation and contrast without feeling harsh. Usage tip: keep primary buttons in teal and use the darkest shade only for text and icons.

Image example of sea glass mist generated using media.io

4) Lighthouse Red Accent

HEX: #061a2d #1e4f7a #f7f3ea #e24a3b #f0c27a

Mood: bold, nautical, energetic

Best for: summer regatta event poster

Bold and energetic, it recalls a lighthouse beam cutting through blue evening air. Let navy and cream set a clean foundation, then use the red as a purposeful focal point for dates, prices, or key calls. The warm gold keeps the red from feeling too sharp and adds a sunlit finish. Usage tip: limit the red to one or two elements per layout to keep the design premium.

Image example of lighthouse red accent generated using media.io

5) Deep Atlantic

HEX: #041426 #0f2f4a #1f6f8b #a7d7e0 #e8f2f4

Mood: cool, immersive, professional

Best for: data dashboard UI theme

Cool and immersive, this nautical color palette feels like deep water with bright surface reflections. Use the near-black navy for sidebars and headers, then bring in teal-blue for charts and active states. The pale aqua and soft white keep dense dashboards readable. Usage tip: reserve the lightest tones for cards and data tables to reduce visual fatigue.

Image example of deep atlantic generated using media.io

6) Dockside Denim

HEX: #10243f #2d4f7c #5f84b8 #d5dde7 #f6f7f9

Mood: reliable, modern, understated

Best for: SaaS landing page hero section

Reliable and understated, it suggests worn denim jackets and painted dock rails. Build hierarchy with the two darkest blues for headings and navigation, and let the lighter denim shade carry illustrations or hero gradients. Cool grays and off-white keep the layout minimal and tech-forward. Usage tip: use the mid-blue for primary buttons so they stand out without shouting.

Image example of dockside denim generated using media.io

7) Oyster Pearl

HEX: #0d2238 #3c6f8f #c9d2d7 #f2efe8 #9a8f86

Mood: soft, coastal, elegant

Best for: wedding invitation suite

Soft and elegant, it evokes oyster shells, pearl sheen, and calm tidal pools. As a nautical color palette, it shines in minimalist print where texture and spacing do the heavy lifting. Pair the slate-blue with warm greige for type and borders, then let pearl white dominate the paper feel. Usage tip: choose uncoated stock and use the deepest navy for names and key details.

Image example of oyster pearl generated using media.io

8) Stormy Horizon

HEX: #0a1b2a #2b3c4f #5f6f7a #c7d0d6 #f1f4f6

Mood: moody, cinematic, restrained

Best for: editorial magazine spread

Moody and cinematic, it feels like a storm line meeting the sea. Use the charcoal-navy and slate for headlines and pull quotes, with cool grays creating a calm rhythm across columns. The near-white keeps images and typography from getting heavy. Usage tip: keep one accent line or rule in the medium slate to guide the reader without clutter.

Image example of stormy horizon generated using media.io

9) Coastal Pine

HEX: #081b1f #0f3a3b #2a6c5e #d8e2d8 #f3f5f1

Mood: natural, rugged, outdoorsy

Best for: outdoor apparel product packaging

Natural and rugged, it recalls pine-lined cliffs above dark water. The deep greens read like coastal evergreens and pair well with soft off-whites for a clean label system. Use the mid-green as a strong but earthy brand accent on tags and seals. Usage tip: keep packaging backgrounds light and let the darkest tone anchor logos and SKU info.

Image example of coastal pine generated using media.io

10) Marina Teal

HEX: #062a33 #0f5560 #1aa6a3 #bfe9e6 #fff7ee

Mood: bright, breezy, contemporary

Best for: social media promo template

Bright and breezy, this nautical color scheme feels like sun on marina water with a clean modern edge. Use the lively teal as the main attention color and keep the darker blue-green for text and icons. The pale aqua and warm cream soften the contrast and make feeds feel friendly. Usage tip: build a repeating template where teal highlights the offer and cream holds the copy.

Image example of marina teal generated using media.io

11) Rope & Canvas

HEX: #1b2d3a #47616a #cbb89a #f1e7d6 #a36a4f

Mood: heritage, tactile, cozy

Best for: craft spirits label design

Heritage and tactile, it suggests coiled rope, canvas sails, and aged wood. The navy-charcoal and slate work beautifully for type, while the canvas tones create a premium, craft feel. Add the warm brown as a stamp, seal, or small illustration detail. Usage tip: use the light canvas shade as negative space around the logo to keep the label readable at a distance.

Image example of rope & canvas generated using media.io

12) Midnight Compass

HEX: #030b14 #0a2342 #1f4e79 #f2d59c #f7f5ef

Mood: luxury, dramatic, precise

Best for: watch brand product ad

Luxurious and dramatic, it feels like a midnight voyage guided by brass instruments. Deep blues deliver a premium base, while the warm gold reads as polished metal for highlights and details. Keep the off-white for product copy to maintain clarity against dark areas. Usage tip: place gold only on key edges and small typography to avoid a flat, overly warm look.

Image example of midnight compass generated using media.io

13) Pelican Gray

HEX: #10222c #35515f #8aa0ab #d6dde1 #f7f9fb

Mood: neutral, airy, professional

Best for: architect portfolio website UI

Neutral and airy, these nautical hues bring to mind pelican feathers and overcast shoreline light. Use the grays as your foundation and bring in the deep blue-gray for navigation, outlines, and captions. The soft near-white creates gallery-like space for photography and case studies. Usage tip: keep interactive states subtle by shifting only one step darker within the gray range.

Image example of pelican gray generated using media.io

14) Sunlit Pier

HEX: #0f2e4b #2f6f9a #f2c57c #f6e7cf #ffffff

Mood: sunny, upbeat, welcoming

Best for: travel newsletter header design

Sunny and welcoming, it feels like a bright pier afternoon with clear sky and warm light on wood. Use the blues for structure and trust, then let the golden tone act as your friendly highlight for buttons or section labels. Cream and white keep the overall look breezy and readable. Usage tip: try a subtle blue-to-light gradient behind the header to add depth without adding new colors.

Image example of sunlit pier generated using media.io

15) Tidal Lavender

HEX: #121a3a #374785 #7a86c9 #cdd2f2 #f5f3ff

Mood: dreamy, modern, serene

Best for: beauty product packaging set

Dreamy and serene, these nautical color combinations suggest twilight tides with a soft violet haze. The indigo and periwinkle tones feel contemporary while still calm, especially on pale lilac backgrounds. Add the deepest shade for typography and small brand marks to keep it crisp. Usage tip: use matte finishes so the pastel range stays sophisticated rather than sugary.

Image example of tidal lavender generated using media.io

16) Captain's Brass

HEX: #0b2239 #1e4b6a #c8a24a #ead9b6 #f8f2e6

Mood: heritage, upscale, confident

Best for: hotel lobby brochure design

Upscale and confident, it evokes polished brass, crisp uniforms, and deep blue upholstery. Use navy for structure and the brass tone as a premium accent for headings, rules, and icons. The warm creams prevent the gold from feeling harsh and make long-form text easier to read. Usage tip: keep brass to thin lines and small motifs so it feels like metal detailing, not flat yellow.

Image example of captain's brass generated using media.io

17) Breakwater Slate

HEX: #0f1b24 #243848 #4c6472 #9fb0bb #e8edf0

Mood: steady, industrial, modern

Best for: construction company website UI

Steady and modern, this nautical color palette recalls breakwater stones and steel-gray skies. Layer the dark slate tones for navigation and section headers, then use the lighter blue-gray for cards and panels. The pale gray works well as a calm background that keeps content front and center. Usage tip: add contrast with size and weight changes rather than introducing extra accent colors.

Image example of breakwater slate generated using media.io

18) Regatta Pop

HEX: #0a1e3f #1e6fd9 #ff4d3d #f7f1e1 #20bfa8

Mood: playful, sporty, high-energy

Best for: sportswear campaign poster

Playful and sporty, it feels like racing sails and bright flags snapping in the wind. The nautical color scheme shines when you choose one pop color as the headline driver and keep the others as supporting accents. Navy and cream ground the composition so the electric blue, coral, and teal stay controlled. Usage tip: use color blocking in large shapes rather than scattering accents everywhere.

Image example of regatta pop generated using media.io

19) Kelp & Driftwood

HEX: #102017 #2f4a2f #7a6a4f #d6c7b2 #f4efe6

Mood: earthy, calm, organic

Best for: eco skincare label and box

Earthy and calm, it brings up kelp forests, driftwood, and sandy shorelines. Use the deep green for brand marks and ingredient headings, then let the driftwood brown warm up illustrations and seals. The soft beige range keeps the packaging clean and sustainable-looking. Usage tip: choose simple line art in dark green to keep the natural vibe consistent.

Image example of kelp & driftwood generated using media.io

20) Iceberg Blue

HEX: #0a2a43 #1e5f7a #6fbad1 #cfeef6 #f7fdff

Mood: icy, fresh, spacious

Best for: fintech app onboarding screens

Icy and fresh, it evokes clear water and bright iceberg light. Use the deep blue for strong typography and the mid-to-light blues for progress states and illustrations. The pale aqua and near-white give screens a spacious, trustworthy feel. Usage tip: keep gradients subtle and stay within adjacent blues so the interface remains calm.

Image example of iceberg blue generated using media.io

21) Chartroom Classic

HEX: #0b2748 #174d7a #f4f0e6 #d1b48c #6b5a4b

Mood: traditional, bookish, refined

Best for: museum exhibit flyer

Traditional and refined, it feels like old charts, leather bindings, and ink-blue notes. As a nautical color palette, it works beautifully for cultural print pieces that need authority without feeling cold. Use the cream for generous margins, the blues for headings, and the tan-brown duo for small map marks or callouts. Usage tip: add thin rules in tan to separate sections without heavy boxes.

Image example of chartroom classic generated using media.io

22) Seafarer Pastels

HEX: #1a2b52 #7db6c8 #f6d1c1 #f8f1e9 #a6d8c9

Mood: soft, friendly, contemporary

Best for: creative studio portfolio landing

Soft and friendly, it suggests painted seaside houses and a pastel sunrise. The navy grounds the lighter tones so the blush and mint feel intentional rather than sweet. Use the sky blue for links and highlights, and keep the cream as the main background. Usage tip: apply navy sparingly in large blocks and let pastels carry the airy personality.

Image example of seafarer pastels generated using media.io

What Colors Go Well with Nautical?

Nautical palettes pair best with grounded neutrals: sand, canvas, warm cream, and misty grays. These tones soften dark navy and keep large backgrounds from feeling heavy.

For a modern twist, add sea-glass teal, slate blue, or iceberg light blue to create depth while staying in a calm coastal range.

If you want contrast, use a single accent like lighthouse red, terracotta, or brass gold—kept sparse—so the design still reads clean and maritime.

How to Use a Nautical Color Palette in Real Designs

Start with navy (or deep blue-green) as your “ink” for headings, icons, and UI structure. Then choose a light neutral (cream, pearl, or near-white) as the primary background to protect readability.

Use one mid-tone (denim, slate, or teal) for interactive states like buttons, links, charts, or highlights. This keeps the system consistent across screens and components.

For print, lean on spacing and texture: uncoated stock, thin rules, and restrained accents make nautical tones feel premium instead of themed.

Create Nautical Palette Visuals with AI

If you already have HEX codes, you can turn them into on-brand visuals fast—menus, posters, packaging mockups, and UI screens—by describing the layout and letting AI handle the composition.

Reuse the prompts above as templates, swapping the subject (brand board, brochure, onboarding screens) while keeping your nautical colors consistent across every output.

With Media.io, you can generate multiple variations, pick the best direction, and refine quickly—without rebuilding from scratch.

Next: Apricot Color Palette