Cold White to Bats Cloak Color Palette

About this palette

Cold White to Bats Cloak is a 4-color muted palette: #ECFCFF (Cold White), #486263 (Still Waters Run Deep), #C79F8B (Cashmere Clay), #211417 (Bats Cloak). It mixes white, gray, orange, black tones and feels warm overall. The strongest text pairing is #ECFCFF on #211417 with a contrast ratio of 16.94:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cold White	rgb(236, 252, 255)	hsl(189, 100%, 96%)
Still Waters Run Deep	rgb(72, 98, 99)	hsl(182, 16%, 34%)
Cashmere Clay	rgb(199, 159, 139)	hsl(20, 35%, 66%)
Bats Cloak	rgb(33, 20, 23)	hsl(346, 25%, 10%)

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.

Aa16.94:1 Super#ECFCFF on #211417
Aa16.94:1 Super#211417 on #ECFCFF
Aa7.44:1 Very good#C79F8B on #211417
Aa7.44:1 Very good#211417 on #C79F8B
Aa6.22:1 Good#ECFCFF on #486263
Aa6.22:1 Good#486263 on #ECFCFF

Color blindness preview

CSS variables

/* Cold White to Bats Cloak — https://swatchly.xyz/palette/ecfcff-486263-c79f8b-211417 */
:root {
  --cold-white: #ecfcff;
  --still-waters-run-deep: #486263;
  --cashmere-clay: #c79f8b;
  --bats-cloak: #211417;
}

Tailwind CSS v4

/* Cold White to Bats Cloak — https://swatchly.xyz/palette/ecfcff-486263-c79f8b-211417 */
@theme {
  --color-cold-white: #ecfcff;
  --color-cold-white-50: #ecfcff;
  --color-cold-white-100: #e7f0f2;
  --color-cold-white-200: #d1dcde;
  --color-cold-white-300: #b8c5c8;
  --color-cold-white-400: #97a6a8;
  --color-cold-white-500: #7b8a8c;
  --color-cold-white-600: #616f71;
  --color-cold-white-700: #4b585a;
  --color-cold-white-800: #3a4547;
  --color-cold-white-900: #2c3536;
  --color-cold-white-950: #1a2122;
  --color-still-waters-run-deep: #486263;
  --color-still-waters-run-deep-50: #e9f9f9;
  --color-still-waters-run-deep-100: #ddeff0;
  --color-still-waters-run-deep-200: #c9dede;
  --color-still-waters-run-deep-300: #b1c9ca;
  --color-still-waters-run-deep-400: #91abac;
  --color-still-waters-run-deep-500: #769192;
  --color-still-waters-run-deep-600: #5d7879;
  --color-still-waters-run-deep-700: #486263;
  --color-still-waters-run-deep-800: #374d4e;
  --color-still-waters-run-deep-900: #293b3c;
  --color-still-waters-run-deep-950: #182526;
  --color-cashmere-clay: #c79f8b;
  --color-cashmere-clay-50: #fff6f1;
  --color-cashmere-clay-100: #ffeae0;
  --color-cashmere-clay-200: #f4d6c7;
  --color-cashmere-clay-300: #e1bfae;
  --color-cashmere-clay-400: #c79f8b;
  --color-cashmere-clay-500: #a9826f;
  --color-cashmere-clay-600: #8c6754;
  --color-cashmere-clay-700: #71503f;
  --color-cashmere-clay-800: #5a3d2e;
  --color-cashmere-clay-900: #452d21;
  --color-cashmere-clay-950: #2c1b12;
  --color-bats-cloak: #211417;
  --color-bats-cloak-50: #fdf2f4;
  --color-bats-cloak-100: #f4e8ea;
  --color-bats-cloak-200: #e2d3d6;
  --color-bats-cloak-300: #ccbcbf;
  --color-bats-cloak-400: #ae9ca0;
  --color-bats-cloak-500: #917f83;
  --color-bats-cloak-600: #746467;
  --color-bats-cloak-700: #5b4d50;
  --color-bats-cloak-800: #46393c;
  --color-bats-cloak-900: #33292c;
  --color-bats-cloak-950: #211417;
}