Black Stallion to Tropical Forest Color Palette

About this palette

Black Stallion to Tropical Forest is a 5-color dark, cool palette: #00201F (Black Stallion), #013854 (Sea of Stars), #406C75 (Ocean’s Embrace), #000B0D (Black Knight), #005040 (Tropical Forest). It mixes turquoise, blue, black tones and feels cool overall. The strongest text pairing is #406C75 on #000B0D with a contrast ratio of 3.44:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Stallion	rgb(0, 32, 31)	hsl(178, 100%, 6%)
Sea of Stars	rgb(1, 56, 84)	hsl(200, 98%, 17%)
Ocean’s Embrace	rgb(64, 108, 117)	hsl(190, 29%, 35%)
Black Knight	rgb(0, 11, 13)	hsl(189, 100%, 3%)
Tropical Forest	rgb(0, 80, 64)	hsl(168, 100%, 16%)

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.44:1 Poor#406C75 on #000B0D
Aa3.44:1 Poor#000B0D on #406C75

Color blindness preview

CSS variables

/* Black Stallion to Tropical Forest — https://swatchly.xyz/palette/00201f-013854-406c75-000b0d-005040 */
:root {
  --black-stallion: #00201f;
  --sea-of-stars: #013854;
  --ocean-s-embrace: #406c75;
  --black-knight: #000b0d;
  --tropical-forest: #005040;
}

Tailwind CSS v4

/* Black Stallion to Tropical Forest — https://swatchly.xyz/palette/00201f-013854-406c75-000b0d-005040 */
@theme {
  --color-black-stallion: #00201f;
  --color-black-stallion-50: #e6faf9;
  --color-black-stallion-100: #daf1ef;
  --color-black-stallion-200: #c3dedc;
  --color-black-stallion-300: #aac8c6;
  --color-black-stallion-400: #88a9a7;
  --color-black-stallion-500: #6b8d8b;
  --color-black-stallion-600: #51716f;
  --color-black-stallion-700: #3c5957;
  --color-black-stallion-800: #2b4443;
  --color-black-stallion-900: #1e3332;
  --color-black-stallion-950: #00201f;
  --color-sea-of-stars: #013854;
  --color-sea-of-stars-50: #ecf7ff;
  --color-sea-of-stars-100: #d8efff;
  --color-sea-of-stars-200: #b8ddf7;
  --color-sea-of-stars-300: #9dc7e5;
  --color-sea-of-stars-400: #79a8c8;
  --color-sea-of-stars-500: #5c8dad;
  --color-sea-of-stars-600: #437291;
  --color-sea-of-stars-700: #2f5b77;
  --color-sea-of-stars-800: #214860;
  --color-sea-of-stars-900: #013854;
  --color-sea-of-stars-950: #0a2331;
  --color-ocean-s-embrace: #406c75;
  --color-ocean-s-embrace-50: #e3faff;
  --color-ocean-s-embrace-100: #d3f0f6;
  --color-ocean-s-embrace-200: #b9dce3;
  --color-ocean-s-embrace-300: #9dc5cd;
  --color-ocean-s-embrace-400: #79a5ae;
  --color-ocean-s-embrace-500: #5b8891;
  --color-ocean-s-embrace-600: #406c75;
  --color-ocean-s-embrace-700: #2f565e;
  --color-ocean-s-embrace-800: #22434a;
  --color-ocean-s-embrace-900: #17343a;
  --color-ocean-s-embrace-950: #0c2125;
  --color-black-knight: #000b0d;
  --color-black-knight-50: #ecf8f9;
  --color-black-knight-100: #e1eef0;
  --color-black-knight-200: #cbdbdd;
  --color-black-knight-300: #b3c5c7;
  --color-black-knight-400: #92a6a8;
  --color-black-knight-500: #718588;
  --color-black-knight-600: #546668;
  --color-black-knight-700: #3b4b4c;
  --color-black-knight-800: #273335;
  --color-black-knight-900: #172021;
  --color-black-knight-950: #000b0d;
  --color-tropical-forest: #005040;
  --color-tropical-forest-50: #dbfff3;
  --color-tropical-forest-100: #cdf6e8;
  --color-tropical-forest-200: #b3e4d4;
  --color-tropical-forest-300: #97cfbd;
  --color-tropical-forest-400: #72b19e;
  --color-tropical-forest-500: #549683;
  --color-tropical-forest-600: #3a7a69;
  --color-tropical-forest-700: #266353;
  --color-tropical-forest-800: #005040;
  --color-tropical-forest-900: #0c3d31;
  --color-tropical-forest-950: #04261e;
}