Palette

Cobalt Ink Spill

A striking composition of deep blues and indigos, reminiscent of rich ink spilling onto a pristine surface.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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 Ink Spill

Overview

The Cobalt Ink Spill palette offers a striking composition of deep blues and indigos, reminiscent of rich ink spilling onto a pristine surface. With hues ranging from the profound #000080 to the vibrant #6495ED, this palette is perfect for designs demanding elegance, drama, and a touch of abstract artistry. 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 that aim to combine classic sophistication with a modern, impactful appeal, from luxury branding to artistic digital interfaces.

Best used for

Luxury branding and packaging
Art gallery and museum website design
Creative advertising campaigns
High-end editorial design
Abstract digital art and illustrations
Premium tech product interfaces

Suggested color roles

primary

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

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, evoking a spill.

background

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

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 values.
The brightest hue, #6495ED, offers excellent contrast against all darker blues in the palette for interactive elements.
When using #6495ED as a background, ensure text is in a contrasting dark color like black or #000080 to maintain legibility.

Recommended combinations

Ink Drop

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

#000080 · #0000CD · #6495ED

Deep Indigo

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

#191970 · #4169E1 · #6495ED

Midnight Spill

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-ink-spill-1: #000080;
  --cobalt-ink-spill-2: #0000CD;
  --cobalt-ink-spill-3: #191970;
  --cobalt-ink-spill-4: #4169E1;
  --cobalt-ink-spill-5: #6495ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-ink-spill": {
        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 Ink Spill