What colors are in the Deep Ocean palette?

The Deep Ocean palette has 5 colors: #03045E, #023E8A, #0077B6, #0096C7, #48CAE4.

Where can I use this palette?

It's a Dark palette — well suited to dark mode, dashboards, gaming ui, hero sections.

Is the Deep Ocean palette accessible?

Its darkest and lightest colors have a contrast ratio of 9.17:1. 3 color pairs in it meet WCAG AA for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the Deep Ocean palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Text #03045E Navy Primary #023E8A Classic Blue Accent #0077B6 True Blue Secondary #0096C7 Bondi Blue Surface #48CAE4 Lagoon Blue

Deep Ocean

5 colors

Open in generator All palettes

Text Navy — #03045E

Primary Classic Blue — #023E8A

Accent True Blue — #0077B6

Secondary Bondi Blue — #0096C7

Surface Lagoon Blue — #48CAE4

Contrast matrix

Text on Surface 9.17 AAA

Primary on Surface 5.27 AA

Text on Secondary 5.23 AA

Surface on Primary 5.27 AA

Accent on Text 3.65 AA Large

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --text: #03045E;
  --primary: #023E8A;
  --accent: #0077B6;
  --secondary: #0096C7;
  --surface: #48CAE4;
}

$deep-ocean-text: #03045E;
$deep-ocean-primary: #023E8A;
$deep-ocean-accent: #0077B6;
$deep-ocean-secondary: #0096C7;
$deep-ocean-surface: #48CAE4;

// tailwind.config.js — theme.extend.colors
colors: {
  'deep-ocean': {
    'text': '#03045E',
    'primary': '#023E8A',
    'accent': '#0077B6',
    'secondary': '#0096C7',
    'surface': '#48CAE4',
  },
}

{
    "deep-ocean": {
        "text": {
            "value": "#03045E",
            "type": "color"
        },
        "primary": {
            "value": "#023E8A",
            "type": "color"
        },
        "accent": {
            "value": "#0077B6",
            "type": "color"
        },
        "secondary": {
            "value": "#0096C7",
            "type": "color"
        },
        "surface": {
            "value": "#48CAE4",
            "type": "color"
        }
    }
}

{
    "text": "#03045E",
    "primary": "#023E8A",
    "accent": "#0077B6",
    "secondary": "#0096C7",
    "surface": "#48CAE4"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#03045E
#023E8A
#0077B6
#0096C7
#48CAE4

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

Deep Ocean

Contrast matrix

Export tokens

How the roles work

Related palettes