Palette

Cobalt Canvas

A range of blues, from deep midnight to clear sky, ideal for expansive, thoughtful designs.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cobalt Canvas reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Cobalt Canvas.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#003366#336699#6699CC#99CCFF#CCEEFF

Palette guide

How to use Cobalt Canvas

Overview

The Cobalt Canvas palette offers a versatile range of blues, from deep midnight to clear sky, ideal for expansive, thoughtful designs. With hues like the profound #003366 and the airy #CCEEFF, this palette provides a harmonious gradient that evokes calmness and professionalism. Designers can utilize #336699 as a solid primary, while #6699CC offers a balanced mid-tone for diverse applications. The lightest hue, #99CCFF, is excellent for subtle accents or backgrounds. This palette is perfect for projects that require a clean, adaptable, and sophisticated blue theme, from digital dashboards to corporate communications.

Best used for

Corporate and business websites
Educational technology platforms
Data analytics and visualization tools
Healthcare and wellness branding
Cloud computing services interfaces
Professional portfolio websites

Suggested color roles

primary

#336699 - A solid, dependable blue that serves as a strong primary for main headings, navigation, or critical call-to-action buttons, conveying trust.

secondary

#6699CC - A lighter, more approachable blue, suitable for subheadings, active states, or supporting visual information, maintaining harmony.

accent

#99CCFF - A bright, clear blue that provides a refreshing highlight, ideal for interactive elements, subtle icons, or graphical emphasis.

background

#CCEEFF - A very light, almost white sky blue, perfect for clean, open backgrounds that provide a sense of spaciousness and clarity.

text

For text on #CCEEFF, use a dark gray or black for excellent readability. For headings on #003366 or #336699, use white or a very light gray.

Accessibility notes

Ensure sufficient contrast between #99CCFF and #CCEEFF if used for text, as they are close in luminance.
The darkest hue, #003366, provides an excellent accessible background for white or very light text.
Avoid using light text on mid-tones like #6699CC without verifying WCAG AA compliance.
For interactive elements, use distinct contrast, such as #336699 for default and #99CCFF for hover states.

Recommended combinations

Sky Gradient

Ideal for soft, progressive backgrounds or visual elements that need a smooth transition from light to mid-blue.

#CCEEFF · #99CCFF · #6699CC

Deep Horizon

Use #003366 for bold branding, #336699 for content, and #CCEEFF for bright backgrounds or clean text.

#003366 · #336699 · #CCEEFF

Canvas Contrast

Excellent for defining sections; #336699 as main, #99CCFF for highlights, and #003366 for strong text or borders.

#336699 · #99CCFF · #003366

CSS variables

:root {
  --cobalt-canvas-1: #003366;
  --cobalt-canvas-2: #336699;
  --cobalt-canvas-3: #6699CC;
  --cobalt-canvas-4: #99CCFF;
  --cobalt-canvas-5: #CCEEFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-canvas": {
        1: "#003366",
        2: "#336699",
        3: "#6699CC",
        4: "#99CCFF",
        5: "#CCEEFF",
      }
    }
  }
}

Hex values

Color 1#003366

Color 2#336699

Color 3#6699CC

Color 4#99CCFF

Color 5#CCEEFF

Accessibility

Contrast checker

2.1:1Fail

4.2:1AA18

7.5:1AAA

10.4:1AAA

2.1:1Fail

2:1Fail

3.6:1AA18

4.9:1AA

4.2:1AA18

2:1Fail

1.8:1Fail

2.5:1Fail

7.5:1AAA

3.6:1AA18

1.8:1Fail

1.4:1Fail

10.4:1AAA

4.9:1AA

2.5:1Fail

1.4:1Fail

Similar palettes

More like Cobalt Canvas

View all cool

Galactic Ice Drift

Icy Winter Chill

Weathered Indigo Denim

Alpine Ridge Frost

Arctic Chill Breeze

Arctic Fox