Deep Ocean: a marine and outdoor website color palette

A navy page with sea-glass and foam accents feels like open water: calm, deep and a little adventurous.

#06141F

Background

#0D2232

Surface

#E3F1F6

Text

#3CC7C0

Accent

#F2C572

Highlight

Live preview

The palette as a real page

deep.orlume.site

Fresh, deep

Make the first impression the one they remember.

The Deep Ocean palette set as a real page: #E3F1F6 text on #06141F, every action in #3CC7C0.

Start freeSee how it works

Designed first

Surface #0D2232 keeps cards distinct from the page.

Built in minutes

Surface #0D2232 keeps cards distinct from the page.

Live in one click

Surface #0D2232 keeps cards distinct from the page.

Headings in Sora, body in Inter.

WCAG 2.2, computed

Contrast

AaBody text on the page#E3F1F6 on #06141F16.1:1AAA
AaBody text on cards#E3F1F6 on #0D223214.0:1AAA
AaAccent links and icons on the page#3CC7C0 on #06141F8.9:1AAA
AaHighlight on the page#F2C572 on #06141F · large text11.5:1AAA
AaPage colour on an accent button#06141F on #3CC7C0 · large text8.9:1AAA

AA needs 4.5:1 for body text and 3:1 for large text; AAA needs 7:1. Check any pair in the contrast checker.

Take it with you

Copy the palette

:root {
  --color-background: #06141F;
  --color-surface: #0D2232;
  --color-text: #E3F1F6;
  --color-accent: #3CC7C0;
  --color-highlight: #F2C572;
}

Keep browsing

More website color palettes

Questions

Questions, answered.

The things people ask before they start building.

Start building See pricing

What colors are best for a marine and outdoor website?

A navy page with sea-glass and foam accents feels like open water: calm, deep and a little adventurous. The Deep Ocean palette uses #06141F for the page, #E3F1F6 for text, #3CC7C0 for actions and #F2C572 as a highlight.

Is the Deep Ocean palette accessible?

Body text scores 16.1:1 against the background, which passes WCAG AAA. Every pairing a site uses is scored on this page.

Can an AI website builder pick a color palette for me?

Yes. Orlume (orlume.site) decides the palette, typography and layout for your brief in its design pass, before any code is written, then builds the site in React and Next.js and deploys it in one click.

Still stuck? Email us

Or let Orlume pick the colors for you.

Describe the site you want. Watch it get designed, not just generated. Then publish it to its own orlume.site address.

Free to start
No card required
Publish to a live URL
You own the code