Tempest in a Teapot to Midnight Pines color palette

293B46Tempest in a Teapot 000C02Blackn’t 00536DNight Kite 336065After the Storm 1A2309Midnight Pines

Open in generator Export PNG, PDF, ASE…

About this palette

Tempest in a Teapot to Midnight Pines is a 5-color dark, cool palette: #293B46 (Tempest in a Teapot), #000C02 (Blackn’t), #00536D (Night Kite), #336065 (After the Storm), #1A2309 (Midnight Pines). It mixes gray, black, blue, turquoise, green tones and feels cool overall. The strongest text pairing is #000C02 on #336065 with a contrast ratio of 2.85:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tempest in a Teapot	rgb(41, 59, 70)	hsl(203, 26%, 22%)
Blackn’t	rgb(0, 12, 2)	hsl(130, 100%, 2%)
Night Kite	rgb(0, 83, 109)	hsl(194, 100%, 21%)
After the Storm	rgb(51, 96, 101)	hsl(186, 33%, 30%)
Midnight Pines	rgb(26, 35, 9)	hsl(81, 59%, 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.

Color blindness preview

CSS variables

/* Tempest in a Teapot to Midnight Pines — https://swatchly.xyz/palette/293b46-000c02-00536d-336065-1a2309 */
:root {
  --tempest-in-a-teapot: #293b46;
  --blackn-t: #000c02;
  --night-kite: #00536d;
  --after-the-storm: #336065;
  --midnight-pines: #1a2309;
}

Tailwind CSS v4

/* Tempest in a Teapot to Midnight Pines — https://swatchly.xyz/palette/293b46-000c02-00536d-336065-1a2309 */
@theme {
  --color-tempest-in-a-teapot: #293b46;
  --color-tempest-in-a-teapot-50: #ebf7ff;
  --color-tempest-in-a-teapot-100: #e0edf6;
  --color-tempest-in-a-teapot-200: #cadae4;
  --color-tempest-in-a-teapot-300: #b2c4d0;
  --color-tempest-in-a-teapot-400: #92a6b3;
  --color-tempest-in-a-teapot-500: #778c98;
  --color-tempest-in-a-teapot-600: #5f727e;
  --color-tempest-in-a-teapot-700: #4a5c67;
  --color-tempest-in-a-teapot-800: #3a4a53;
  --color-tempest-in-a-teapot-900: #293b46;
  --color-tempest-in-a-teapot-950: #1b252b;
  --color-blackn-t: #000c02;
  --color-blackn-t-50: #ecf9ee;
  --color-blackn-t-100: #e1f0e3;
  --color-blackn-t-200: #cbddce;
  --color-blackn-t-300: #b3c7b6;
  --color-blackn-t-400: #92a895;
  --color-blackn-t-500: #728875;
  --color-blackn-t-600: #546857;
  --color-blackn-t-700: #3b4c3d;
  --color-blackn-t-800: #273429;
  --color-blackn-t-900: #172018;
  --color-blackn-t-950: #000c02;
  --color-night-kite: #00536d;
  --color-night-kite-50: #e9f8ff;
  --color-night-kite-100: #d2f1ff;
  --color-night-kite-200: #afe0f7;
  --color-night-kite-300: #94cce5;
  --color-night-kite-400: #70afcb;
  --color-night-kite-500: #5295b1;
  --color-night-kite-600: #387b97;
  --color-night-kite-700: #24657e;
  --color-night-kite-800: #00536d;
  --color-night-kite-900: #084053;
  --color-night-kite-950: #012937;
  --color-after-the-storm: #336065;
  --color-after-the-storm-50: #e1fbfe;
  --color-after-the-storm-100: #d4f2f5;
  --color-after-the-storm-200: #bde0e4;
  --color-after-the-storm-300: #a2cacf;
  --color-after-the-storm-400: #80acb1;
  --color-after-the-storm-500: #639196;
  --color-after-the-storm-600: #4a777c;
  --color-after-the-storm-700: #336065;
  --color-after-the-storm-800: #264b4f;
  --color-after-the-storm-900: #1a3a3d;
  --color-after-the-storm-950: #0d2427;
  --color-midnight-pines: #1a2309;
  --color-midnight-pines-50: #f1f8e6;
  --color-midnight-pines-100: #e6efdb;
  --color-midnight-pines-200: #d2dcc4;
  --color-midnight-pines-300: #bbc6ab;
  --color-midnight-pines-400: #9ba789;
  --color-midnight-pines-500: #7f8b6e;
  --color-midnight-pines-600: #657154;
  --color-midnight-pines-700: #4f5a40;
  --color-midnight-pines-800: #3d4630;
  --color-midnight-pines-900: #2f3623;
  --color-midnight-pines-950: #1a2309;
}