What colors are in the Cool Blue palette?

The Cool Blue palette has 5 colors: #0B2A4A, #134074, #2A6FB0, #6FA3D6, #CFE3F5.

Where can I use this palette?

It's a Muted palette — well suited to editorial layouts, minimal ui, photography portfolios, modern brands.

Is the Cool Blue palette accessible?

Its darkest and lightest colors have a contrast ratio of 11.05: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 Cool Blue palette?

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

Text #0B2A4A Prussian Blue Accent #134074 Classic Blue Primary #2A6FB0 Lapis Lazuli Secondary #6FA3D6 Iceberg Surface #CFE3F5 Lavender

Cool Blue

5 colors

Open in generator All palettes

Text Prussian Blue — #0B2A4A

Accent Classic Blue — #134074

Primary Lapis Lazuli — #2A6FB0

Secondary Iceberg — #6FA3D6

Surface Lavender — #CFE3F5

Contrast matrix

Text on Surface 11.05 AAA

Primary on Surface 3.99 AA Large

Text on Secondary 5.46 AA

Surface on Primary 3.99 AA Large

Accent on Text 1.39 Fail

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: #0B2A4A;
  --accent: #134074;
  --primary: #2A6FB0;
  --secondary: #6FA3D6;
  --surface: #CFE3F5;
}

$cool-blue-text: #0B2A4A;
$cool-blue-accent: #134074;
$cool-blue-primary: #2A6FB0;
$cool-blue-secondary: #6FA3D6;
$cool-blue-surface: #CFE3F5;

// tailwind.config.js — theme.extend.colors
colors: {
  'cool-blue': {
    'text': '#0B2A4A',
    'accent': '#134074',
    'primary': '#2A6FB0',
    'secondary': '#6FA3D6',
    'surface': '#CFE3F5',
  },
}

{
    "cool-blue": {
        "text": {
            "value": "#0B2A4A",
            "type": "color"
        },
        "accent": {
            "value": "#134074",
            "type": "color"
        },
        "primary": {
            "value": "#2A6FB0",
            "type": "color"
        },
        "secondary": {
            "value": "#6FA3D6",
            "type": "color"
        },
        "surface": {
            "value": "#CFE3F5",
            "type": "color"
        }
    }
}

{
    "text": "#0B2A4A",
    "accent": "#134074",
    "primary": "#2A6FB0",
    "secondary": "#6FA3D6",
    "surface": "#CFE3F5"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0B2A4A
#134074
#2A6FB0
#6FA3D6
#CFE3F5

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.

Cool Blue

Contrast matrix

Export tokens

How the roles work

Related palettes