Palette

Cobalt Flow

A cohesive spectrum of deep blues, from navy to lighter shades, reflecting a seamless water current.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cobalt Flow 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 Flow.

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

Data visualization

#000080#0000CD#191970#4169E1#6495ED

Palette guide

How to use Cobalt Flow

Overview

The Cobalt Flow palette offers a cohesive spectrum of deep blues, from intense navy to lighter shades, reflecting a seamless water current. With hues like the profound #000080 and the vibrant #6495ED, this palette is perfect for designs that require depth, serenity, and a dynamic flow. Designers can leverage #0000CD as a strong primary, while #191970 offers a versatile mid-tone for various elements. The brightest hue, #4169E1, provides a compelling highlight. This palette is ideal for projects aiming for a sophisticated, calm, and immersive visual experience, from oceanic branding to digital interfaces.

Best used for

Marine and aquatic branding
Data visualization and dashboards
Luxury product packaging (e.g., spirits, tech)
Educational content on science or nature
Meditation and wellness app interfaces
Modern corporate identity

Suggested color roles

primary

#0000CD - A vibrant, true blue that serves as a strong primary, ideal for main headings, brand logos, or core UI elements, conveying energy and stability.

secondary

#191970 - A deep, sophisticated navy that complements the primary, suitable for subheadings, secondary navigation, or supporting graphics.

accent

#6495ED - A clear, light blue that provides a refreshing accent, perfect for interactive elements, key data points, or subtle background textures.

background

#000080 - An intense, dark navy that creates a deep, immersive backdrop, allowing lighter blues to stand out with clarity.

text

For text on #000080 or #191970, use #6495ED or white for optimal readability. For text on #6495ED, use black or #000080.

Accessibility notes

Ensure high contrast when placing light text, such as #6495ED, on darker blues like #000080 or #191970.
Avoid using #4169E1 for small text on #0000CD without verifying WCAG AA compliance due to similar luminance.
The brightest hue, #6495ED, offers good contrast against all darker blues for interactive elements and highlights.
When using #6495ED as a background, ensure text is in a contrasting dark color like black or #000080.

Recommended combinations

Water Current

Creates a dynamic, flowing interface; #000080 for background, #0000CD for content, #6495ED for bright highlights/CTAs.

#000080 · #0000CD · #6495ED

Deep Ocean

Use #191970 for main sections, #4169E1 for supporting elements, and #6495ED for vibrant accents or delicate details.

#191970 · #4169E1 · #6495ED

Indigo Depths

Ideal for creating depth through gradients or layered UI, moving from the deepest navy to a rich, true blue.

#000080 · #191970 · #4169E1

CSS variables

:root {
  --cobalt-flow-1: #000080;
  --cobalt-flow-2: #0000CD;
  --cobalt-flow-3: #191970;
  --cobalt-flow-4: #4169E1;
  --cobalt-flow-5: #6495ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-flow": {
        1: "#000080",
        2: "#0000CD",
        3: "#191970",
        4: "#4169E1",
        5: "#6495ED",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#0000CD

Color 3#191970

Color 4#4169E1

Color 5#6495ED

Accessibility

Contrast checker

1.4:1Fail

1.1:1Fail

3.3:1AA18

5.4:1AA

1.4:1Fail

1.3:1Fail

2.3:1Fail

3.8:1AA18

1.1:1Fail

1.3:1Fail

3.1:1AA18

5:1AA

3.3:1AA18

2.3:1Fail

3.1:1AA18

1.6:1Fail

5.4:1AA

3.8:1AA18

5:1AA

1.6:1Fail

Similar palettes

More like Cobalt Flow

View all monochrome

Azure Depths Gradient