Pi to Pitch-Black Forests Color Palette

About this palette

Pi to Pitch-Black Forests is a 4-color dark, cool palette: #2F4154 (Pi), #001211 (Jedi Night), #006E99 (Hydra), #00302B (Pitch-Black Forests). It mixes blue, black, turquoise tones and feels cool overall. The strongest text pairing is #001211 on #006E99 with a contrast ratio of 3.37:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pi	rgb(47, 65, 84)	hsl(211, 28%, 26%)
Jedi Night	rgb(0, 18, 17)	hsl(177, 100%, 4%)
Hydra	rgb(0, 110, 153)	hsl(197, 100%, 30%)
Pitch-Black Forests	rgb(0, 48, 43)	hsl(174, 100%, 9%)

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.37:1 Poor#001211 on #006E99
Aa3.37:1 Poor#006E99 on #001211

Color blindness preview

CSS variables

/* Pi to Pitch-Black Forests — https://swatchly.xyz/palette/2f4154-001211-006e99-00302b */
:root {
  --pi: #2f4154;
  --jedi-night: #001211;
  --hydra: #006e99;
  --pitch-black-forests: #00302b;
}

Tailwind CSS v4

/* Pi to Pitch-Black Forests — https://swatchly.xyz/palette/2f4154-001211-006e99-00302b */
@theme {
  --color-pi: #2f4154;
  --color-pi-50: #eef6ff;
  --color-pi-100: #dfedfc;
  --color-pi-200: #c9d9eb;
  --color-pi-300: #b0c3d6;
  --color-pi-400: #8fa3b8;
  --color-pi-500: #73879c;
  --color-pi-600: #596c80;
  --color-pi-700: #435467;
  --color-pi-800: #2f4154;
  --color-pi-900: #25323f;
  --color-pi-950: #151e28;
  --color-jedi-night: #001211;
  --color-jedi-night-50: #eaf9f7;
  --color-jedi-night-100: #dfefee;
  --color-jedi-night-200: #c9dcdb;
  --color-jedi-night-300: #b0c6c4;
  --color-jedi-night-400: #8fa7a5;
  --color-jedi-night-500: #708886;
  --color-jedi-night-600: #536a68;
  --color-jedi-night-700: #3b504e;
  --color-jedi-night-800: #293938;
  --color-jedi-night-900: #1a2625;
  --color-jedi-night-950: #001211;
  --color-hydra: #006e99;
  --color-hydra-50: #ebf7ff;
  --color-hydra-100: #d4efff;
  --color-hydra-200: #a5deff;
  --color-hydra-300: #7fc8f0;
  --color-hydra-400: #54a7d4;
  --color-hydra-500: #318ab7;
  --color-hydra-600: #006e99;
  --color-hydra-700: #00577a;
  --color-hydra-800: #004461;
  --color-hydra-900: #00354c;
  --color-hydra-950: #002131;
  --color-pitch-black-forests: #00302b;
  --color-pitch-black-forests-50: #e2fbf7;
  --color-pitch-black-forests-100: #d6f2ed;
  --color-pitch-black-forests-200: #bee0da;
  --color-pitch-black-forests-300: #a4cac4;
  --color-pitch-black-forests-400: #81aca5;
  --color-pitch-black-forests-500: #66928b;
  --color-pitch-black-forests-600: #4e7972;
  --color-pitch-black-forests-700: #3b635d;
  --color-pitch-black-forests-800: #2c514c;
  --color-pitch-black-forests-900: #21423d;
  --color-pitch-black-forests-950: #00302b;
}