Heavenly Sky to Bats Cloak color palette

718DACHeavenly Sky 225353Sunken Mystery 95B9B7Summit 59718CPlumbeous F3DDD2Air-Kiss 1E1412Bats Cloak

Open in generator Export PNG, PDF, ASE…

About this palette

Heavenly Sky to Bats Cloak is a 6-color muted, cool palette: #718DAC (Heavenly Sky), #225353 (Sunken Mystery), #95B9B7 (Summit), #59718C (Plumbeous), #F3DDD2 (Air-Kiss), #1E1412 (Bats Cloak). It mixes blue, turquoise, gray, black tones and feels cool overall. The strongest text pairing is #F3DDD2 on #1E1412 with a contrast ratio of 13.82:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Heavenly Sky	rgb(113, 141, 172)	hsl(212, 26%, 56%)
Sunken Mystery	rgb(34, 83, 83)	hsl(180, 42%, 23%)
Summit	rgb(149, 185, 183)	hsl(177, 20%, 65%)
Plumbeous	rgb(89, 113, 140)	hsl(212, 22%, 45%)
Air-Kiss	rgb(243, 221, 210)	hsl(20, 58%, 89%)
Bats Cloak	rgb(30, 20, 18)	hsl(10, 25%, 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.

Aa13.82:1 Super#F3DDD2 on #1E1412
Aa13.82:1 Super#1E1412 on #F3DDD2
Aa8.51:1 Very good#95B9B7 on #1E1412
Aa8.51:1 Very good#1E1412 on #95B9B7
Aa6.62:1 Good#225353 on #F3DDD2
Aa6.62:1 Good#F3DDD2 on #225353
Aa5.25:1 Good#718DAC on #1E1412
Aa5.25:1 Good#1E1412 on #718DAC

Color blindness preview

CSS variables

/* Heavenly Sky to Bats Cloak — https://swatchly.xyz/palette/718dac-225353-95b9b7-59718c-f3ddd2-1e1412 */
:root {
  --heavenly-sky: #718dac;
  --sunken-mystery: #225353;
  --summit: #95b9b7;
  --plumbeous: #59718c;
  --air-kiss: #f3ddd2;
  --bats-cloak: #1e1412;
}

Tailwind CSS v4

/* Heavenly Sky to Bats Cloak — https://swatchly.xyz/palette/718dac-225353-95b9b7-59718c-f3ddd2-1e1412 */
@theme {
  --color-heavenly-sky: #718dac;
  --color-heavenly-sky-50: #eff7ff;
  --color-heavenly-sky-100: #e0eeff;
  --color-heavenly-sky-200: #c6dcf5;
  --color-heavenly-sky-300: #aec7e2;
  --color-heavenly-sky-400: #8da8c6;
  --color-heavenly-sky-500: #718dac;
  --color-heavenly-sky-600: #57728f;
  --color-heavenly-sky-700: #425a75;
  --color-heavenly-sky-800: #31465d;
  --color-heavenly-sky-900: #233549;
  --color-heavenly-sky-950: #14212f;
  --color-sunken-mystery: #225353;
  --color-sunken-mystery-50: #e0fcfb;
  --color-sunken-mystery-100: #d3f2f2;
  --color-sunken-mystery-200: #bbe0df;
  --color-sunken-mystery-300: #a2cccb;
  --color-sunken-mystery-400: #80afae;
  --color-sunken-mystery-500: #649594;
  --color-sunken-mystery-600: #4b7b7b;
  --color-sunken-mystery-700: #386565;
  --color-sunken-mystery-800: #225353;
  --color-sunken-mystery-900: #1c4040;
  --color-sunken-mystery-950: #0e2929;
  --color-summit: #95b9b7;
  --color-summit-50: #edfffe;
  --color-summit-100: #e4f8f7;
  --color-summit-200: #cfe8e7;
  --color-summit-300: #b8d5d3;
  --color-summit-400: #95b9b7;
  --color-summit-500: #789a98;
  --color-summit-600: #5b7d7b;
  --color-summit-700: #436361;
  --color-summit-800: #314d4b;
  --color-summit-900: #223a39;
  --color-summit-950: #122322;
  --color-plumbeous: #59718c;
  --color-plumbeous-50: #eef6ff;
  --color-plumbeous-100: #deeeff;
  --color-plumbeous-200: #c7dbf1;
  --color-plumbeous-300: #afc5de;
  --color-plumbeous-400: #8ea6c2;
  --color-plumbeous-500: #728ba7;
  --color-plumbeous-600: #59718c;
  --color-plumbeous-700: #445a72;
  --color-plumbeous-800: #33465b;
  --color-plumbeous-900: #253547;
  --color-plumbeous-950: #15212e;
  --color-air-kiss: #f3ddd2;
  --color-air-kiss-50: #f8eae4;
  --color-air-kiss-100: #f3ddd2;
  --color-air-kiss-200: #ddccc4;
  --color-air-kiss-300: #c9b7ad;
  --color-air-kiss-400: #ac998f;
  --color-air-kiss-500: #927f75;
  --color-air-kiss-600: #79665d;
  --color-air-kiss-700: #625149;
  --color-air-kiss-800: #4d3f37;
  --color-air-kiss-900: #3c3029;
  --color-air-kiss-950: #261d19;
  --color-bats-cloak: #1e1412;
  --color-bats-cloak-50: #fbf3f1;
  --color-bats-cloak-100: #f2e9e7;
  --color-bats-cloak-200: #e0d5d2;
  --color-bats-cloak-300: #cabebb;
  --color-bats-cloak-400: #ab9e9b;
  --color-bats-cloak-500: #8e817e;
  --color-bats-cloak-600: #726562;
  --color-bats-cloak-700: #584d4b;
  --color-bats-cloak-800: #433938;
  --color-bats-cloak-900: #312928;
  --color-bats-cloak-950: #1e1412;
}