Bats Cloak to Toxic Latte Color Palette

About this palette

Bats Cloak to Toxic Latte is a 5-color muted, gradient palette: #1E1619 (Bats Cloak), #374458 (Lava Stone), #968978 (Shipwreck), #9FC0A7 (Meadow Morn), #E1F7EB (Toxic Latte). It mixes black, blue, gray, green, white tones and feels cool overall. The strongest text pairing is #1E1619 on #E1F7EB with a contrast ratio of 15.80:1, and 5 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bats Cloak	rgb(30, 22, 25)	hsl(338, 15%, 10%)
Lava Stone	rgb(55, 68, 88)	hsl(216, 23%, 28%)
Shipwreck	rgb(150, 137, 120)	hsl(34, 13%, 53%)
Meadow Morn	rgb(159, 192, 167)	hsl(135, 21%, 69%)
Toxic Latte	rgb(225, 247, 235)	hsl(147, 58%, 93%)

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.

Aa15.80:1 Super#1E1619 on #E1F7EB
Aa15.80:1 Super#E1F7EB on #1E1619
Aa8.93:1 Very good#1E1619 on #9FC0A7
Aa8.93:1 Very good#9FC0A7 on #1E1619
Aa8.78:1 Very good#374458 on #E1F7EB
Aa8.78:1 Very good#E1F7EB on #374458
Aa5.19:1 Good#1E1619 on #968978
Aa5.19:1 Good#968978 on #1E1619

Color blindness preview

CSS variables

/* Bats Cloak to Toxic Latte — https://swatchly.xyz/palette/1e1619-374458-968978-9fc0a7-e1f7eb */
:root {
  --bats-cloak: #1e1619;
  --lava-stone: #374458;
  --shipwreck: #968978;
  --meadow-morn: #9fc0a7;
  --toxic-latte: #e1f7eb;
}

Tailwind CSS v4

/* Bats Cloak to Toxic Latte — https://swatchly.xyz/palette/1e1619-374458-968978-9fc0a7-e1f7eb */
@theme {
  --color-bats-cloak: #1e1619;
  --color-bats-cloak-50: #faf3f5;
  --color-bats-cloak-100: #f0e9eb;
  --color-bats-cloak-200: #ddd5d8;
  --color-bats-cloak-300: #c8bec1;
  --color-bats-cloak-400: #a99ea2;
  --color-bats-cloak-500: #8c8185;
  --color-bats-cloak-600: #706669;
  --color-bats-cloak-700: #574f52;
  --color-bats-cloak-800: #433b3e;
  --color-bats-cloak-900: #312b2d;
  --color-bats-cloak-950: #1e1619;
  --color-lava-stone: #374458;
  --color-lava-stone-50: #eff6ff;
  --color-lava-stone-100: #e2ecfb;
  --color-lava-stone-200: #ccd8eb;
  --color-lava-stone-300: #b5c2d7;
  --color-lava-stone-400: #94a3b9;
  --color-lava-stone-500: #79889e;
  --color-lava-stone-600: #5f6d83;
  --color-lava-stone-700: #4a576a;
  --color-lava-stone-800: #374458;
  --color-lava-stone-900: #2b3442;
  --color-lava-stone-950: #19202a;
  --color-shipwreck: #968978;
  --color-shipwreck-50: #fdf5eb;
  --color-shipwreck-100: #f4ece0;
  --color-shipwreck-200: #e3d9cb;
  --color-shipwreck-300: #cec3b3;
  --color-shipwreck-400: #b0a493;
  --color-shipwreck-500: #968978;
  --color-shipwreck-600: #7a6e5d;
  --color-shipwreck-700: #625648;
  --color-shipwreck-800: #4d4336;
  --color-shipwreck-900: #3b3328;
  --color-shipwreck-950: #251f17;
  --color-meadow-morn: #9fc0a7;
  --color-meadow-morn-50: #e2f6e6;
  --color-meadow-morn-100: #d4ebd9;
  --color-meadow-morn-200: #bcd6c2;
  --color-meadow-morn-300: #9fc0a7;
  --color-meadow-morn-400: #83a28a;
  --color-meadow-morn-500: #698971;
  --color-meadow-morn-600: #526f59;
  --color-meadow-morn-700: #3f5a46;
  --color-meadow-morn-800: #304736;
  --color-meadow-morn-900: #24382a;
  --color-meadow-morn-950: #152319;
  --color-toxic-latte: #e1f7eb;
  --color-toxic-latte-50: #e1f7eb;
  --color-toxic-latte-100: #deebe4;
  --color-toxic-latte-200: #c9d9d0;
  --color-toxic-latte-300: #b2c4ba;
  --color-toxic-latte-400: #92a69b;
  --color-toxic-latte-500: #778b80;
  --color-toxic-latte-600: #5e7167;
  --color-toxic-latte-700: #495a51;
  --color-toxic-latte-800: #37463f;
  --color-toxic-latte-900: #2a3630;
  --color-toxic-latte-950: #19221d;
}