Palette

Deep Sea Kraken

Journey into the inky, enigmatic depths where ancient sea creatures dwell.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Sea Kraken 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 Deep Sea Kraken.

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

Data visualization

#000B1A#0F2038#2A445C#4B6E8A#7CA8BE

Palette guide

How to use Deep Sea Kraken

Overview

The Deep Sea Kraken palette invites designers to journey into the inky, enigmatic depths where ancient sea creatures dwell. This collection of profound blues, from the near-black #000B1A to the lighter #7CA8BE, is perfect for conveying mystery, power, and a sense of the unknown. The gradual progression of shades like #0F2038, #2A445C, and #4B6E8A allows for sophisticated layering and creation of depth, ideal for immersive digital experiences. Designers can leverage this palette to evoke themes of exploration, hidden strength, or dramatic fantasy, making it a powerful tool for compelling visual storytelling and impactful branding.

Best used for

Adventure or fantasy game branding
Mystery novel covers and illustrations
Deep-sea exploration documentary graphics
Dark mode UI themes for creative apps
Luxury brand websites with a mysterious edge
Event branding for dramatic themes

Suggested color roles

primary

Use #000B1A as the dominant background or primary brand color to establish an inky, powerful, and mysterious foundation.

secondary

Apply #0F2038 for major content sections, navigation, or as a slightly lighter dark tone to add subtle visual structure.

accent

Highlight interactive elements, calls to action, or key visual features with #7CA8BE, providing a soft yet clear contrast.

background

The profound #000B1A creates an excellent, almost black canvas, ensuring content stands out with optimal readability for light text.

text

For maximum readability, use crisp white or a very pale blue-gray (e.g., #F0F8FF) for primary text. #4B6E8A can be used for secondary text.

Accessibility notes

Ensure sufficient contrast for text, especially when using #4B6E8A or #7CA8BE on darker backgrounds; larger text is often safer.
The subtle differences between the darker shades might not provide enough contrast for functional elements; use them primarily for aesthetic depth.
Always check text and background color combinations against WCAG guidelines for readability, especially for small font sizes.
Consider using a slightly brighter white for text to enhance visibility against the darkest blues like #000B1A and #0F2038.

Recommended combinations

Kraken Depths

Creates a strong dark base with a soft, ethereal highlight for headings or important UI elements, evoking mystery.

#000B1A · #0F2038 · #7CA8BE

Enigmatic Gradient

Ideal for seamless background transitions, subtle hover effects, or progressive disclosure in user interfaces.

#0F2038 · #2A445C · #4B6E8A

Abyssal Power

Perfect for a very dark background, a mid-tone for secondary content, and a lighter shade for key information or outlines.

#000B1A · #4B6E8A · #2A445C

CSS variables

:root {
  --deep-sea-kraken-1: #000B1A;
  --deep-sea-kraken-2: #0F2038;
  --deep-sea-kraken-3: #2A445C;
  --deep-sea-kraken-4: #4B6E8A;
  --deep-sea-kraken-5: #7CA8BE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-kraken": {
        1: "#000B1A",
        2: "#0F2038",
        3: "#2A445C",
        4: "#4B6E8A",
        5: "#7CA8BE",
      }
    }
  }
}

Hex values

Color 1#000B1A

Color 2#0F2038

Color 3#2A445C

Color 4#4B6E8A

Color 5#7CA8BE

Accessibility

Contrast checker

1.2:1Fail

2:1Fail

3.7:1AA18

7.7:1AAA

1.2:1Fail

1.6:1Fail

3:1AA18

6.4:1AA