Palette

Abyssal Trench Flora

Explores the mysterious, deep blues and purples found in the most inaccessible parts of the deep ocean trench.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abyssal Trench Flora 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 Abyssal Trench Flora.

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

Data visualization

#0A0A1F#1C1C3D#33336B#4F4F9C#7A7ACD

Palette guide

How to use Abyssal Trench Flora

Overview

The Abyssal Trench Flora palette explores the mysterious, deep blues and purples found in the most inaccessible parts of the deep ocean trench. This dark and enigmatic collection features a powerful progression from the profound #0A0A1F (Very Dark Blue) and #1C1C3D (Dark Indigo) to the rich #33336B (Deep Purple) and #4F4F9C (Amethyst), culminating in the ethereal #7A7ACD (Lavender Blue). Designers can leverage this palette to evoke a sense of quiet power, deep contemplation, and sophisticated mystery, perfect for dark mode interfaces, immersive storytelling, or high-tech branding. Developers will find these blues and purples excellent for establishing subtle visual hierarchy and creating distinct sections, ensuring an elegant and authoritative aesthetic that speaks to hidden, otherworldly beauty.

Best used for

Dark mode UI/UX design
Fantasy or sci-fi interfaces
Luxury brand websites
Mysterious digital art creations
Deep ocean themed websites
Abstract cosmic designs

Suggested color roles

primary

#0A0A1F (Very Dark Blue) - The deepest shade, ideal for main backgrounds, navigation bars, and primary content containers, providing profound depth.

secondary

#1C1C3D (Dark Indigo) - A slightly lighter, yet still deep, blue-purple for secondary panels, card backgrounds, or subtle dividing lines.

accent

#4F4F9C (Amethyst) - Use this rich purple for interactive elements, hover states, or to highlight key data points with a touch of otherworldly glow.

background

#0A0A1F (Very Dark Blue) - Creates an immersive, inky dark background, making any lighter elements subtly stand out.

text

White (#FFFFFF) or a very light grey (#F0F0F0) provides optimal contrast for readability against all dark colors in this palette.

Accessibility notes

Ensure all text, especially on the darkest backgrounds, uses white or very light grey for high contrast and readability.
The palette is predominantly dark; avoid using any of the darker blues/purples for text on similar dark backgrounds.
When using #4F4F9C as an accent, ensure it has sufficient contrast against the surrounding darker shades.
Consider using a slightly brighter white for critical calls-to-action to ensure they are easily discoverable.

Recommended combinations

Trench Depths

Excellent for creating layered dark backgrounds, deep content containers, or subtle depth effects in UI design.

#0A0A1F · #1C1C3D · #33336B

Flora Glow

Ideal for highlighting active states, subtle calls-to-action, or creating a mysterious glow against profound darks.

#1C1C3D · #4F4F9C · #7A7ACD

Abyssal Contrast

Perfect for establishing clear visual hierarchy between deep background and important foreground elements.

#0A0A1F · #33336B · #7A7ACD

CSS variables

:root {
  --abyssal-trench-flora-1: #0A0A1F;
  --abyssal-trench-flora-2: #1C1C3D;
  --abyssal-trench-flora-3: #33336B;
  --abyssal-trench-flora-4: #4F4F9C;
  --abyssal-trench-flora-5: #7A7ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-trench-flora": {
        1: "#0A0A1F",
        2: "#1C1C3D",
        3: "#33336B",
        4: "#4F4F9C",
        5: "#7A7ACD",
      }
    }
  }
}

Hex values

Color 1#0A0A1F

Color 2#1C1C3D

Color 3#33336B

Color 4#4F4F9C

Color 5#7A7ACD

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

2.7:1Fail

5.1:1AA

1.2:1Fail

1.4:1Fail

2.3:1Fail

4.3:1AA18

1.7:1Fail

1.4:1Fail

1.6:1Fail

3:1AA18

2.7:1Fail

2.3:1Fail

1.6:1Fail

1.9:1Fail

5.1:1AA

4.3:1AA18

3:1AA18

1.9:1Fail

Similar palettes

More like Abyssal Trench Flora

View all dark

Abyss Gaze

Abyssal Bioluminescent Glow