Coastal Color Palette Combinations (20 Picks + Hex)

A coastal color palette captures the easy balance of sea, sky, and sand—clean enough for modern UI, but warm enough for inviting rooms and branding.

Below are 20 curated coastal color combinations (with HEX codes), plus quick pairing and usage tips you can apply to web layouts, print, packaging, and interiors.

Why Coastal Palettes Work So Well

Coastal colors feel instantly “breathable” because they rely on high-light neutrals (foam whites, sand beiges) and cooled-down ocean hues (teal, seafoam, slate blue). This creates a naturally spacious look that’s easy on the eyes.

They’re also flexible: shift toward warm sands and driftwood for cozy interiors, or lean into crisp aquas and navies for clean, modern web and product design. The theme stays coastal without locking you into obvious “beachy” clichés.

Most coastal schemes include a strong anchor shade—usually deep navy or charcoal—so you can maintain contrast for typography, navigation, and calls to action while keeping the overall mood soft.

20+ Coastal Color Palette Ideas (with HEX Codes)

1) Sea Glass Morning

HEX: #CFE9E6 #7EC7C2 #2F8F9D #F2E8D5 #0E3A4A

Mood: breezy, clean, optimistic

Best for: wellness app onboarding screens

Breezy sea-glass greens and calm ocean teal evoke an early walk along a quiet shoreline. The soft sand neutral keeps the look light, while the deep navy adds contrast for headings and icons. It works beautifully as a coastal color palette for wellness, travel, or lifestyle brands that want calm without feeling bland. Pair it with thin-line illustrations and generous spacing, then use the navy sparingly to anchor CTAs.

Image example of sea glass morning 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) Dune House Neutrals

HEX: #F5F0E6 #DCC9B6 #BFA38A #7E8B8C #2E3A3B

Mood: warm, grounded, refined

Best for: living room paint and decor planning

Warm dunes, weathered linen, and driftwood browns create a lived-in, relaxed elegance. The foggy gray-green adds a cool counterpoint, while the charcoal tone gives trims and hardware a crisp edge. These tones suit open-plan interiors, coastal cottages, and modern rustic spaces alike. Use the light cream on large walls, then layer texture through natural woods, jute rugs, and matte black accents.

Image example of dune house neutrals generated using media.io

3) Surfboard Retro

HEX: #FF8A5B #FFD166 #06D6A0 #118AB2 #073B4C

Mood: playful, sunny, bold

Best for: sunscreen tube packaging design

Sunset coral and bright citrus feel like vintage surf shops and salty hair after a swim. The punchy aqua and saturated blue keep it energetic, while the deep teal grounds type and logos. It shines on summer packaging, beach event promos, and youth-focused branding. Tip: keep the coral and yellow as the hero blocks, then reserve the deep teal for high-contrast ingredient text.

Image example of surfboard retro generated using media.io

4) Harbor Nightfall

HEX: #0B1D2A #1F4E5F #4C7C8A #C9D6D2 #D9B08C

Mood: moody, upscale, maritime

Best for: seafood restaurant brand identity

Deep harbor navy and steel teal bring to mind dock lights reflecting on dark water. The pale mist neutral keeps the palette from feeling too heavy, and the warm tan adds a subtle, welcoming note. It works well for premium menus, signage, and social graphics that need a nautical vibe without being kitschy. Use the navy for backgrounds and pair the tan with embossed details or foil accents for a refined finish.

Image example of harbor nightfall generated using media.io

5) Tidepool Pastels

HEX: #E6F7F8 #B8E1DD #A9C7E8 #F6C1C8 #F3E6B3

Mood: soft, sweet, airy

Best for: baby shower invitation set

Powdery seafoam and baby-blue tones feel like shallow tidepools under bright morning light. Blush pink and a buttery yellow add gentle warmth without overpowering the calm base. These colors are ideal for invitations, party signage, and keepsake prints. Tip: keep the background nearly white, then use pink only for names or small icons to maintain a delicate balance.

Image example of tidepool pastels generated using media.io

6) Salt Air Minimal

HEX: #F7FAF9 #D9E5E3 #A7C4C2 #5E8C8A #2B4A4B

Mood: minimal, fresh, calming

Best for: landing page hero and section blocks

Clean salt-air whites and muted aquas create a quiet, modern calm. The deeper teal works as an elegant anchor for navigation and headline text, while the pale minty grays keep sections airy. These coastal color combinations are perfect for SaaS, skincare, and boutique services that want softness with structure. Use subtle gradients between the two lightest tones to add depth without visual noise.

Image example of salt air minimal generated using media.io

7) Coral Reef Accent

HEX: #FF6F61 #FFB3A7 #2EC4B6 #0E7C86 #F7F3E8

Mood: vibrant, upbeat, modern

Best for: summer sale poster design

Lively coral and watery teal feel like sunlit reefs and clear waves. The blush tint softens the brighter accents, and the creamy off-white keeps layouts readable. It works well for seasonal promos, pop-up events, and bold social graphics. Tip: set the background to the warm cream, then let coral drive the headline while teal supports icons and price callouts.

Image example of coral reef accent generated using media.io

8) Lighthouse Classic

HEX: #F4F1EA #D8C9A3 #C04B3A #1E3A5F #0D141C

Mood: classic, nautical, confident

Best for: editorial magazine feature layout

Cream and rope-tan set a timeless base, while brick red and navy bring that lighthouse-at-dusk punch. The near-black adds ink-like clarity for body copy and fine rules. These tones fit travel editorials, heritage brands, and maritime storytelling. Use the red as a single accent per spread, and keep the navy for section headers to maintain a premium feel.

Image example of lighthouse classic generated using media.io

9) Pebble and Foam

HEX: #EEF2F3 #BFC9CA #7AA3A8 #2D6A7A #1B2A2F

Mood: cool, modern, understated

Best for: skincare product ad creative

Cool foam whites and pebble grays feel crisp, clean, and quietly luxurious. The blue-green midtones add a spa-like freshness, while the dark slate gives labels and headlines strong contrast. It performs well for minimalist ads, product pages, and premium packaging. Tip: use the lightest tone for background and let the dark slate carry all key text for instant readability.

Image example of pebble and foam generated using media.io

10) Boardwalk Sunset

HEX: #FAD2B6 #F28C8C #C06C84 #355C7D #F7F4EA

Mood: romantic, warm, nostalgic

Best for: travel brochure cover and inside header

Soft peach and rosy dusk tones evoke boardwalk lights fading into a cool evening sky. The muted plum adds depth, while the slate blue balances everything with a relaxed coastal edge. As a coastal color palette, it suits boutique hotels, destination weddings, and travel creators who want warmth without neon. Try using the peach as the main field color and keep the blue for maps, icons, and small captions.

Image example of boardwalk sunset generated using media.io

11) Marina Teal Mix

HEX: #D5F2EF #78D5D0 #2AA6A1 #1B5A6B #F4E3C1

Mood: fresh, techy, approachable

Best for: analytics dashboard UI

Bright marina teals feel energetic like sunlit water in a harbor. The warm cream keeps charts and cards from feeling sterile, while the deep blue-teal adds hierarchy for sidebars and key metrics. It fits dashboards, finance tools, and productivity apps that want to look friendly and modern. Tip: assign one teal to interactive states only, so hover and active elements are instantly recognizable.

Image example of marina teal mix generated using media.io

12) Sandbar Serenity

HEX: #FFF6E5 #E8D7B9 #CDB8A0 #7FB0B6 #2D5C63

Mood: soothing, natural, spa-like

Best for: spa room styling and signage

Creamy sandbar tones and muted blue-green feel like warm sun and cool water in perfect balance. The deeper teal adds quiet sophistication for wayfinding signs, menus, or treatment cards. It works especially well in wellness interiors, resorts, and slow-living brands. Tip: keep the palette matte and textured, and avoid glossy finishes so the calm mood stays intact.

Image example of sandbar serenity generated using media.io

13) Stormy Coast

HEX: #E7ECEF #A9B4C2 #5B6C7A #2F3E46 #0B1320

Mood: dramatic, cool, premium

Best for: outdoor apparel lookbook layout

Storm-cloud grays and deep ocean shadows capture the drama of waves under a heavy sky. The pale mist tone keeps pages breathable, while the near-black delivers editorial contrast. These colors are great for performance brands, winter campaigns, and monochrome-forward design. Tip: use the mid steel-blue as the signature accent, and keep the darkest shade for typography only.

Image example of stormy coast generated using media.io

14) Shell Pink Whisper

HEX: #F8E3E8 #F3B6C2 #E7D8C9 #A2C7C1 #3D5A5C

Mood: romantic, soft, elegant

Best for: wedding stationery suite

Soft shell pinks and warm sand neutrals feel delicate, like sea-polished shells in afternoon light. The sea-glass green adds freshness, while the deep teal keeps monograms and line art crisp. It suits modern weddings, bridal showers, and fine-art invitations. Tip: print the blush tones on textured paper and use the deep teal for minimal linework to avoid a sugary look.

Image example of shell pink whisper generated using media.io

15) Kelp Forest Deep

HEX: #0D2B2A #1F6F6D #68B0AB #DAD7CD #A47148

Mood: earthy, moody, eco-minded

Best for: eco soap box packaging

Deep kelp greens and muted aquas feel like underwater forests with shafts of light. The soft clay neutral makes the darker tones feel approachable, and the warm brown adds an organic, handcrafted note. This coastal color combination is ideal for sustainable packaging, eco labels, and artisan goods. Tip: keep the layout simple, then use kraft textures and a single brown stamp detail to reinforce the natural story.

Image example of kelp forest deep generated using media.io

16) Seaside Citrus

HEX: #FFF1C1 #FFD08A #FF8C42 #2E86AB #24525E

Mood: zesty, fun, summery

Best for: cocktail menu flyer

Sunny lemon and tangerine tones bring instant energy, like beach drinks in golden-hour light. The cool ocean blue keeps the warmth from overpowering, and the dark teal adds structure for pricing and section headers. It works well for bar menus, pool parties, and seasonal promos. Tip: limit the oranges to big shapes or icons, and keep the body text in dark teal for clarity.

Image example of seaside citrus generated using media.io

17) Driftwood Denim

HEX: #E9E4DA #C9B8A7 #8A7F76 #3C6E8F #1E2F3A

Mood: casual, modern, dependable

Best for: fashion e-commerce product page UI

Driftwood tans and worn denim blues feel relaxed, like a favorite jacket after a salty day out. The cool slate and deep navy add clarity for navigation, filters, and product details. It fits apparel, home basics, and everyday lifestyle brands. Tip: use the light tan for page background and reserve the denim blue for primary buttons so CTAs feel confident but not loud.

Image example of driftwood denim generated using media.io

18) Ocean Mist Watercolor

HEX: #F0FBFF #BFE8F7 #87CDE8 #4FA7C6 #E8DCC8

Mood: dreamy, light, artistic

Best for: watercolor botanical wall art print

Pale ocean mist blues feel weightless, like fog rolling in over calm water. The sandy beige keeps the cool tones grounded and adds a natural paper-like warmth. It suits watercolor illustrations, nursery art, and gentle seasonal collections. Tip: let the lightest blue dominate the wash, then add the deeper blue only in small brush accents for a soft, airy finish.

Image example of ocean mist watercolor generated using media.io

19) Pier Rail Modern

HEX: #F5F7F6 #D1D8D6 #9BAAA7 #3A5A67 #1C2E35

Mood: architectural, cool, contemporary

Best for: building facade color study

Clean concrete whites and cool grays feel like modern pier architecture against open sky. The blue-slate and deep charcoal create crisp edges for metalwork, railings, and signage. It works well for architectural presentations, real estate branding, and minimal product design. Tip: keep the darkest shade limited to structural lines so the overall look stays open and light.

Image example of pier rail modern generated using media.io

20) Beach Bonfire Warmth

HEX: #F6E8D5 #E6B89C #D96C4A #5C6B73 #1F2A33

Mood: cozy, rustic, inviting

Best for: instagram post template for events

Warm sand and ember orange feel like bonfire glow with a cool night breeze nearby. The smoky blue-gray adds balance, and the deep charcoal keeps typography sharp for quick-scrolling feeds. It fits event promos, community gatherings, and seasonal announcements. Tip: use the ember tone for one strong headline bar, then keep the rest of the layout soft and neutral to avoid overwhelming the message.

Image example of beach bonfire warmth generated using media.io

What Colors Go Well with Coastal?

Coastal palettes pair best with airy neutrals (off-white, cream, sand, driftwood) plus one ocean family hue (seafoam, teal, slate blue, or navy). This gives you a calm base and a clear identity color without visual clutter.

For accents, choose either warm coral/terracotta for a sun-kissed lift or muted gold/tan for a natural, resort-like finish. If you need strong readability, bring in charcoal or deep navy for type, icons, and UI states.

To avoid a “theme-y” look, keep saturation controlled: let one brighter shade do the talking, and keep the rest softened or grayed down.

How to Use a Coastal Color Palette in Real Designs

In web and app design, start with a near-white background, then apply your coastal midtone (teal or slate) to cards, section blocks, or illustrations. Reserve the darkest navy/charcoal for typography and primary buttons to keep contrast accessible.

For interiors, treat coastal as a texture story: pair cream walls with sand textiles, then add a blue-green through tile, painted cabinetry, or decor. Matte finishes and natural fibers (linen, jute, raw wood) help the palette feel authentic.

In branding and packaging, aim for one signature hero color (coral, teal, or navy) and a warm neutral. Use the hero shade in large shapes, and keep small text on the darkest tone for consistent legibility.

Create Coastal Palette Visuals with AI

If you already have HEX codes, you can quickly turn them into on-brand mockups—posters, UI screens, packaging, or invitation sets—by describing your layout and calling out the colors you want to dominate.

Media.io Text-to-Image is a simple way to explore coastal color directions before committing to a final design system. Generate a few variations, then refine prompts to lock in contrast, mood, and material feel.

Try creating one image per palette to compare how each scheme behaves in real compositions (backgrounds, typography contrast, and accent distribution).

Next: Chinese New Year Color Palette