Void to Inkjet Color Palette

About this palette

Void to Inkjet is a 4-color dark, cool, gradient palette: #010F21 (Void), #003012 (Haunted Forest), #113976 (Tardis Blue), #455673 (Inkjet). It mixes black, green, blue tones and feels cool overall. The strongest text pairing is #010F21 on #455673 with a contrast ratio of 2.59:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Void	rgb(1, 15, 33)	hsl(214, 94%, 7%)
Haunted Forest	rgb(0, 48, 18)	hsl(142, 100%, 9%)
Tardis Blue	rgb(17, 57, 118)	hsl(216, 75%, 26%)
Inkjet	rgb(69, 86, 115)	hsl(218, 25%, 36%)

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.

Color blindness preview

CSS variables

/* Void to Inkjet — https://swatchly.xyz/palette/010f21-003012-113976-455673 */
:root {
  --void: #010f21;
  --haunted-forest: #003012;
  --tardis-blue: #113976;
  --inkjet: #455673;
}

Tailwind CSS v4

/* Void to Inkjet — https://swatchly.xyz/palette/010f21-003012-113976-455673 */
@theme {
  --color-void: #010f21;
  --color-void-50: #eef6ff;
  --color-void-100: #deedfe;
  --color-void-200: #c8daed;
  --color-void-300: #afc3d9;
  --color-void-400: #8ea4bc;
  --color-void-500: #6f859d;
  --color-void-600: #53677d;
  --color-void-700: #3b4d60;
  --color-void-800: #293747;
  --color-void-900: #1a2531;
  --color-void-950: #010f21;
  --color-haunted-forest: #003012;
  --color-haunted-forest-50: #e3fde8;
  --color-haunted-forest-100: #d6f4dc;
  --color-haunted-forest-200: #bfe2c5;
  --color-haunted-forest-300: #a4cdac;
  --color-haunted-forest-400: #82ae8b;
  --color-haunted-forest-500: #679571;
  --color-haunted-forest-600: #4f7b59;
  --color-haunted-forest-700: #3b6445;
  --color-haunted-forest-800: #2c5136;
  --color-haunted-forest-900: #214229;
  --color-haunted-forest-950: #003012;
  --color-tardis-blue: #113976;
  --color-tardis-blue-50: #eff6ff;
  --color-tardis-blue-100: #e0ecff;
  --color-tardis-blue-200: #c1d9ff;
  --color-tardis-blue-300: #9ac1ff;
  --color-tardis-blue-400: #75a0e3;
  --color-tardis-blue-500: #5883c6;
  --color-tardis-blue-600: #3e67a6;
  --color-tardis-blue-700: #2b4f87;
  --color-tardis-blue-800: #113976;
  --color-tardis-blue-900: #132d55;
  --color-tardis-blue-950: #081b37;
  --color-inkjet: #455673;
  --color-inkjet-50: #f0f5ff;
  --color-inkjet-100: #e1ecff;
  --color-inkjet-200: #c9d8f2;
  --color-inkjet-300: #b1c2df;
  --color-inkjet-400: #90a3c2;
  --color-inkjet-500: #7587a6;
  --color-inkjet-600: #5b6d8a;
  --color-inkjet-700: #455673;
  --color-inkjet-800: #35435a;
  --color-inkjet-900: #283347;
  --color-inkjet-950: #17202e;
}