Oblivion to Moonlit Forest Color Palette

About this palette

Oblivion to Moonlit Forest is a 4-color dark, cool, gradient palette: #090038 (Oblivion), #221456 (Silent Orbit), #11433E (Botanical Night), #446E66 (Moonlit Forest). It mixes purple, turquoise tones and feels cool overall. The strongest text pairing is #090038 on #446E66 with a contrast ratio of 3.43:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oblivion	rgb(9, 0, 56)	hsl(250, 100%, 11%)
Silent Orbit	rgb(34, 20, 86)	hsl(253, 62%, 21%)
Botanical Night	rgb(17, 67, 62)	hsl(174, 60%, 16%)
Moonlit Forest	rgb(68, 110, 102)	hsl(169, 24%, 35%)

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.43:1 Poor#090038 on #446E66
Aa3.43:1 Poor#446E66 on #090038

Color blindness preview

CSS variables

/* Oblivion to Moonlit Forest — https://swatchly.xyz/palette/090038-221456-11433e-446e66 */
:root {
  --oblivion: #090038;
  --silent-orbit: #221456;
  --botanical-night: #11433e;
  --moonlit-forest: #446e66;
}

Tailwind CSS v4

/* Oblivion to Moonlit Forest — https://swatchly.xyz/palette/090038-221456-11433e-446e66 */
@theme {
  --color-oblivion: #090038;
  --color-oblivion-50: #f2f4ff;
  --color-oblivion-100: #e6eaff;
  --color-oblivion-200: #cdd5ff;
  --color-oblivion-300: #b2bcf9;
  --color-oblivion-400: #929cde;
  --color-oblivion-500: #737cbf;
  --color-oblivion-600: #565e9c;
  --color-oblivion-700: #3f457b;
  --color-oblivion-800: #2c305c;
  --color-oblivion-900: #1c1f40;
  --color-oblivion-950: #090038;
  --color-silent-orbit: #221456;
  --color-silent-orbit-50: #f4f4ff;
  --color-silent-orbit-100: #e9e9ff;
  --color-silent-orbit-200: #d3d3ff;
  --color-silent-orbit-300: #bab9fd;
  --color-silent-orbit-400: #9b98e2;
  --color-silent-orbit-500: #817dc8;
  --color-silent-orbit-600: #6863ab;
  --color-silent-orbit-700: #534e8f;
  --color-silent-orbit-800: #423c76;
  --color-silent-orbit-900: #332e61;
  --color-silent-orbit-950: #221456;
  --color-botanical-night: #11433e;
  --color-botanical-night-50: #e1fcf8;
  --color-botanical-night-100: #d4f3ee;
  --color-botanical-night-200: #bce0db;
  --color-botanical-night-300: #a1cbc5;
  --color-botanical-night-400: #7faea7;
  --color-botanical-night-500: #64948d;
  --color-botanical-night-600: #4b7a74;
  --color-botanical-night-700: #38645e;
  --color-botanical-night-800: #29514c;
  --color-botanical-night-900: #11433e;
  --color-botanical-night-950: #102a27;
  --color-moonlit-forest: #446e66;
  --color-moonlit-forest-50: #e3fbf6;
  --color-moonlit-forest-100: #d5f1eb;
  --color-moonlit-forest-200: #bbddd6;
  --color-moonlit-forest-300: #a0c6be;
  --color-moonlit-forest-400: #7ca69e;
  --color-moonlit-forest-500: #5f8a81;
  --color-moonlit-forest-600: #446e66;
  --color-moonlit-forest-700: #335851;
  --color-moonlit-forest-800: #25453f;
  --color-moonlit-forest-900: #1a3631;
  --color-moonlit-forest-950: #0e211e;
}