Palette

Cobalt Ink Flow

A sophisticated transition from deep, rich cobalt to lighter, airy blues, like ink swirling in water.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00008B#0000CD#1E90FF#6495ED#ADD8E6

Palette guide

How to use Cobalt Ink Flow

Overview

The Cobalt Ink Flow palette presents a sophisticated transition from deep, rich cobalt to lighter, airy blues, like ink swirling in water. With hues ranging from the profound #00008B to the delicate #ADD8E6, this palette is perfect for designs demanding elegance, fluidity, and a touch of serene beauty. Designers can leverage #0000CD as a strong primary, while #1E90FF offers a vivid mid-tone for dynamic elements. The brightest hue, #6495ED, provides a refreshing highlight. This palette is ideal for projects that aim to combine classic sophistication with a fresh, inviting appeal, from corporate branding to artistic presentations.

Best used for

Elegant corporate branding
Creative writing and publishing platforms
Artistic portfolio and gallery designs
Luxury event invitations
Educational institution branding
Fluid digital art and illustrations

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

#1E90FF - A bright, bold blue that provides an energetic contrast, suitable for subheadings, active states, or supporting graphical elements.

accent

#ADD8E6 - A very light, airy blue that offers a crisp highlight, perfect for interactive elements, small icons, or subtle background textures, evoking water.

background

#00008B - An intense, dark navy that creates a deep, luxurious backdrop, allowing lighter blues to truly pop with clarity and vibrancy.

text

For text on #00008B or #0000CD, use #ADD8E6 or white for optimal readability. For text on #ADD8E6, use black or #00008B.

Accessibility notes

Ensure high contrast when placing light text, such as #ADD8E6, on darker blues like #00008B or #0000CD.
Avoid using #6495ED for small text on #1E90FF without verifying WCAG AA compliance due to similar luminance values.
The brightest hue, #ADD8E6, offers excellent contrast against all darker blues in the palette for interactive elements.
When using #ADD8E6 as a background, ensure text is in a contrasting dark color like black or #00008B to maintain legibility.

Recommended combinations

Ink Swirl

Creates a fluid, high-contrast interface; #00008B for background, #1E90FF for content, #ADD8E6 for bright highlights/CTAs.

#00008B · #1E90FF · #ADD8E6

Deep Stream

Use #0000CD for main sections, #6495ED for supporting elements, and #ADD8E6 for vibrant accents or delicate details.

#0000CD · #6495ED · #ADD8E6

Oceanic Flow

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

#00008B · #0000CD · #1E90FF

CSS variables

:root {
  --cobalt-ink-flow-1: #00008B;
  --cobalt-ink-flow-2: #0000CD;
  --cobalt-ink-flow-3: #1E90FF;
  --cobalt-ink-flow-4: #6495ED;
  --cobalt-ink-flow-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-ink-flow": {
        1: "#00008B",
        2: "#0000CD",
        3: "#1E90FF",
        4: "#6495ED",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#00008B

Color 2#0000CD

Color 3#1E90FF

Color 4#6495ED

Color 5#ADD8E6

Accessibility

Contrast checker

1.4:1Fail

4.7:1AA

5.1:1AA

10:1AAA

1.4:1Fail

3.4:1AA18

3.8:1AA18

7.3:1AAA

4.7:1AA

3.4:1AA18

1.1:1Fail

2.1:1Fail

5.1:1AA

3.8:1AA18

1.1:1Fail

1.9:1Fail

10:1AAA

7.3:1AAA

2.1:1Fail

1.9:1Fail

Similar palettes

More like Cobalt Ink Flow

View all cool

Azure Sapphire Gleam

Oceanic Gemstone Gleam