What colors are in the Cobalt Landing palette?

The Cobalt Landing palette has 5 colors: #0C1330, #17224A, #2F5BFF, #6FD0FF, #EAF0FF.

Where can I use this palette?

It's a Balanced palette — well suited to websites, product ui, presentations, marketing pages.

Is the Cobalt Landing palette accessible?

Its darkest and lightest colors have a contrast ratio of 15.99:1. 5 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 Cobalt Landing palette?

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

Text #0C1330 Graphite Secondary #17224A Navy Primary #2F5BFF Neon Blue Accent #6FD0FF Bright Sky Surface #EAF0FF Cool White

Cobalt Landing

Bold Landing pages 5 colors

A high-conviction cobalt with a cyan highlight for the one thing that must be clicked. Structure stays deep navy so the blues actually pop instead of dissolving into each other.

Open in generator All palettes

Text Graphite — #0C1330

Secondary Navy — #17224A

Primary Neon Blue — #2F5BFF

Accent Bright Sky — #6FD0FF

Surface Cool White — #EAF0FF

Contrast matrix

Text on Surface 15.99 AAA

Primary on Surface 4.53 AA

Text on Secondary 1.18 Fail

Surface on Primary 4.53 AA

Accent on Text 10.55 AAA

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: #0C1330;
  --secondary: #17224A;
  --primary: #2F5BFF;
  --accent: #6FD0FF;
  --surface: #EAF0FF;
}

$cobalt-landing-text: #0C1330;
$cobalt-landing-secondary: #17224A;
$cobalt-landing-primary: #2F5BFF;
$cobalt-landing-accent: #6FD0FF;
$cobalt-landing-surface: #EAF0FF;

// tailwind.config.js — theme.extend.colors
colors: {
  'cobalt-landing': {
    'text': '#0C1330',
    'secondary': '#17224A',
    'primary': '#2F5BFF',
    'accent': '#6FD0FF',
    'surface': '#EAF0FF',
  },
}

{
    "cobalt-landing": {
        "text": {
            "value": "#0C1330",
            "type": "color"
        },
        "secondary": {
            "value": "#17224A",
            "type": "color"
        },
        "primary": {
            "value": "#2F5BFF",
            "type": "color"
        },
        "accent": {
            "value": "#6FD0FF",
            "type": "color"
        },
        "surface": {
            "value": "#EAF0FF",
            "type": "color"
        }
    }
}

{
    "text": "#0C1330",
    "secondary": "#17224A",
    "primary": "#2F5BFF",
    "accent": "#6FD0FF",
    "surface": "#EAF0FF"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0C1330
#17224A
#2F5BFF
#6FD0FF
#EAF0FF

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.

Cobalt Landing

Contrast matrix

Export tokens

How the roles work

Related palettes