Squid’s Ink to Terrestrial Color Palette

About this palette

Squid’s Ink to Terrestrial is a 4-color dark, cool, gradient palette: #02122B (Squid’s Ink), #002828 (Sunken Ship), #283A7B (Good Karma), #296654 (Terrestrial). It mixes black, turquoise, blue tones and feels cool overall. The strongest text pairing is #02122B on #296654 with a contrast ratio of 2.78:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Squid’s Ink	rgb(2, 18, 43)	hsl(217, 91%, 9%)
Sunken Ship	rgb(0, 40, 40)	hsl(180, 100%, 8%)
Good Karma	rgb(40, 58, 123)	hsl(227, 51%, 32%)
Terrestrial	rgb(41, 102, 84)	hsl(162, 43%, 28%)

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

/* Squid’s Ink to Terrestrial — https://swatchly.xyz/palette/02122b-002828-283a7b-296654 */
:root {
  --squid-s-ink: #02122b;
  --sunken-ship: #002828;
  --good-karma: #283a7b;
  --terrestrial: #296654;
}

Tailwind CSS v4

/* Squid’s Ink to Terrestrial — https://swatchly.xyz/palette/02122b-002828-283a7b-296654 */
@theme {
  --color-squid-s-ink: #02122b;
  --color-squid-s-ink-50: #eff6ff;
  --color-squid-s-ink-100: #dfecff;
  --color-squid-s-ink-200: #c6d9f4;
  --color-squid-s-ink-300: #adc3e0;
  --color-squid-s-ink-400: #8ca3c4;
  --color-squid-s-ink-500: #6e85a5;
  --color-squid-s-ink-600: #526886;
  --color-squid-s-ink-700: #3c4f69;
  --color-squid-s-ink-800: #2a3a50;
  --color-squid-s-ink-900: #1c2839;
  --color-squid-s-ink-950: #02122b;
  --color-sunken-ship: #002828;
  --color-sunken-ship-50: #e4fafa;
  --color-sunken-ship-100: #d8f1f0;
  --color-sunken-ship-200: #c1dede;
  --color-sunken-ship-300: #a7c9c8;
  --color-sunken-ship-400: #84aaa9;
  --color-sunken-ship-500: #688f8e;
  --color-sunken-ship-600: #4f7574;
  --color-sunken-ship-700: #3c5e5d;
  --color-sunken-ship-800: #2c4b4a;
  --color-sunken-ship-900: #203a3a;
  --color-sunken-ship-950: #002828;
  --color-good-karma: #283a7b;
  --color-good-karma-50: #f1f5ff;
  --color-good-karma-100: #e3ebff;
  --color-good-karma-200: #c7d7ff;
  --color-good-karma-300: #a7beff;
  --color-good-karma-400: #859ee5;
  --color-good-karma-500: #6981c9;
  --color-good-karma-600: #5066aa;
  --color-good-karma-700: #3c4f8c;
  --color-good-karma-800: #283a7b;
  --color-good-karma-900: #202d5a;
  --color-good-karma-950: #121b3b;
  --color-terrestrial: #296654;
  --color-terrestrial-50: #ddfef2;
  --color-terrestrial-100: #cff5e7;
  --color-terrestrial-200: #b7e4d4;
  --color-terrestrial-300: #9ccfbd;
  --color-terrestrial-400: #78b29e;
  --color-terrestrial-500: #5b9783;
  --color-terrestrial-600: #417d6a;
  --color-terrestrial-700: #296654;
  --color-terrestrial-800: #1e5041;
  --color-terrestrial-900: #123e32;
  --color-terrestrial-950: #07271e;
}