Blackn’t to Aqua Obscura Color Palette

About this palette

Blackn’t to Aqua Obscura is a 5-color dark, cool, gradient palette: #000E02 (Blackn’t), #172300 (Midnight Pines), #004442 (Rich Black), #40490A (Green Not Found), #006C70 (Aqua Obscura). It mixes black, green, turquoise tones and feels cool overall. The strongest text pairing is #000E02 on #006C70 with a contrast ratio of 3.18:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackn’t	rgb(0, 14, 2)	hsl(129, 100%, 3%)
Midnight Pines	rgb(23, 35, 0)	hsl(81, 100%, 7%)
Rich Black	rgb(0, 68, 66)	hsl(178, 100%, 13%)
Green Not Found	rgb(64, 73, 10)	hsl(69, 76%, 16%)
Aqua Obscura	rgb(0, 108, 112)	hsl(182, 100%, 22%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa3.18:1 Poor#000E02 on #006C70
Aa3.18:1 Poor#006C70 on #000E02

Color blindness preview

CSS variables

/* Blackn’t to Aqua Obscura — https://swatchly.xyz/palette/000e02-172300-004442-40490a-006c70 */
:root {
  --blackn-t: #000e02;
  --midnight-pines: #172300;
  --rich-black: #004442;
  --green-not-found: #40490a;
  --aqua-obscura: #006c70;
}

Tailwind CSS v4

/* Blackn’t to Aqua Obscura — https://swatchly.xyz/palette/000e02-172300-004442-40490a-006c70 */
@theme {
  --color-blackn-t: #000e02;
  --color-blackn-t-50: #ebfaed;
  --color-blackn-t-100: #e0f0e2;
  --color-blackn-t-200: #cbddcc;
  --color-blackn-t-300: #b2c8b4;
  --color-blackn-t-400: #91a994;
  --color-blackn-t-500: #718973;
  --color-blackn-t-600: #536956;
  --color-blackn-t-700: #3b4e3d;
  --color-blackn-t-800: #273629;
  --color-blackn-t-900: #172219;
  --color-blackn-t-950: #000e02;
  --color-midnight-pines: #172300;
  --color-midnight-pines-50: #effae2;
  --color-midnight-pines-100: #e5f0d6;
  --color-midnight-pines-200: #d0ddbe;
  --color-midnight-pines-300: #b8c7a4;
  --color-midnight-pines-400: #98a981;
  --color-midnight-pines-500: #7d8d65;
  --color-midnight-pines-600: #63724c;
  --color-midnight-pines-700: #4d5a38;
  --color-midnight-pines-800: #3b4729;
  --color-midnight-pines-900: #2c361d;
  --color-midnight-pines-950: #172300;
  --color-rich-black: #004442;
  --color-rich-black-50: #ddfdfb;
  --color-rich-black-100: #d0f4f1;
  --color-rich-black-200: #b7e1df;
  --color-rich-black-300: #9bccc9;
  --color-rich-black-400: #78afac;
  --color-rich-black-500: #5c9592;
  --color-rich-black-600: #437b78;
  --color-rich-black-700: #306562;
  --color-rich-black-800: #215250;
  --color-rich-black-900: #004442;
  --color-rich-black-950: #0a2b2a;
  --color-green-not-found: #40490a;
  --color-green-not-found-50: #f2fad8;
  --color-green-not-found-100: #e8f0ca;
  --color-green-not-found-200: #d3deb0;
  --color-green-not-found-300: #bdc894;
  --color-green-not-found-400: #9da970;
  --color-green-not-found-500: #828e53;
  --color-green-not-found-600: #68733a;
  --color-green-not-found-700: #535c27;
  --color-green-not-found-800: #40490a;
  --color-green-not-found-900: #31380f;
  --color-green-not-found-950: #1e2305;
  --color-aqua-obscura: #006c70;
  --color-aqua-obscura-50: #d8feff;
  --color-aqua-obscura-100: #c4f6f8;
  --color-aqua-obscura-200: #abe6e8;
  --color-aqua-obscura-300: #8ed2d5;
  --color-aqua-obscura-400: #67b6b9;
  --color-aqua-obscura-500: #479ca0;
  --color-aqua-obscura-600: #298286;
  --color-aqua-obscura-700: #006c70;
  --color-aqua-obscura-800: #005558;
  --color-aqua-obscura-900: #004144;
  --color-aqua-obscura-950: #00292b;
}