Palette

Indigo Ink Shallows

Evoking the profound mystery of the ocean's twilight zone, where deep indigo meets lighter, murky blues.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Indigo Ink Shallows 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 Indigo Ink Shallows.

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

Data visualization

#0A1B2A#1C3D52#3E647C#6A90A8#07131F

Palette guide

How to use Indigo Ink Shallows

Overview

The 'Indigo Ink Shallows' palette delves into the profound mystery of the ocean's twilight zone, blending deep indigos with lighter, murky blues. This collection, featuring the near-black #0A1B2A, the deep #1C3D52, the rich #3E647C, and the ethereal #6A90A8, anchored by the even deeper #07131F, creates a dark, serene, and sophisticated atmosphere. Designers can leverage these hues for projects requiring depth, elegance, and a touch of enigmatic beauty. Developers will find this palette ideal for crafting immersive user experiences, especially in dark mode interfaces, where clarity and visual comfort are paramount.

Best used for

Dark mode UI themes for productivity or creative apps
Luxury branding for high-tech or sophisticated products
Gaming interfaces or cinematic title sequences
Environmental or marine conservation websites
Abstract art or digital illustration projects
E-commerce platforms for premium, exclusive items

Suggested color roles

primary

Utilize #07131F as the absolute darkest foundation for backgrounds or large containers, establishing deep mystery.

secondary

Employ #0A1B2A for primary navigation, card backgrounds, or prominent sections, offering a slightly lighter dark contrast.

accent

Apply #6A90A8 sparingly for interactive elements, highlights, or critical information, providing a luminous focal point.

background

The deepest shades, #07131F or #0A1B2A, are perfect for a dark background. Ensure sufficient contrast for all foreground elements.

text

Pure white or a very light grey works best for body text on the dark backgrounds. For secondary text, #6A90A8 can be used on darker hues.

Accessibility notes

Ensure white text on #07131F or #0A1B2A meets WCAG AAA contrast for optimal readability in dark mode.
Avoid using #1C3D52 or #3E647C for small text on backgrounds like #0A1B2A, as contrast may be insufficient.
The lightest color, #6A90A8, should be checked for contrast when used with any mid-tone blues for text.
Provide clear focus states for interactive elements, as subtle color shifts might be hard to distinguish in this dark palette.

Recommended combinations

Deep Abyss

Excellent for creating a profound, immersive dark background or layered UI elements.

#07131F · #0A1B2A · #1C3D52

Mystic Glow

Ideal for highlighting key information or interactive components, mimicking light piercing deep water.

#1C3D52 · #3E647C · #6A90A8

Subtle Depth

Perfect for gradients or subtle visual cues in dark interfaces, offering elegance and clarity.

#07131F · #3E647C · #6A90A8

CSS variables

:root {
  --indigo-ink-shallows-1: #0A1B2A;
  --indigo-ink-shallows-2: #1C3D52;
  --indigo-ink-shallows-3: #3E647C;
  --indigo-ink-shallows-4: #6A90A8;
  --indigo-ink-shallows-5: #07131F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "indigo-ink-shallows": {
        1: "#0A1B2A",
        2: "#1C3D52",
        3: "#3E647C",
        4: "#6A90A8",
        5: "#07131F",
      }
    }
  }
}

Hex values

Color 1#0A1B2A

Color 2#1C3D52

Color 3#3E647C

Color 4#6A90A8

Color 5#07131F

Accessibility

Contrast checker

1.5:1Fail

2.8:1Fail

5.1:1AA

1.1:1Fail

1.5:1Fail

1.8:1Fail

3.4:1AA18

1.6:1Fail

2.8:1Fail

1.8:1Fail

1.9:1Fail

3:1Fail

5.1:1AA

3.4:1AA18

1.9:1Fail

5.5:1AA

1.1:1Fail

1.6:1Fail

3:1Fail

5.5:1AA

Similar palettes

More like Indigo Ink Shallows

View all dark

Abyss Gaze

Abyssal Bioluminescence

Abyssal Bioluminescent Glow

Abyssal Coral Glow

Abyssal Depths

Abyssal Midnight Reef