Start generating

Ashen Whisper to Abyssal color palette

66687CAshen WhisperA4C5CEAirborneD6E1F5Cold Shoulder678991Gothic949CB8Moon Veil434E59Abyssal
Open in generator Export PNG, PDF, ASE…

About this palette

Ashen Whisper to Abyssal is a 6-color muted palette: #66687C (Ashen Whisper), #A4C5CE (Airborne), #D6E1F5 (Cold Shoulder), #678991 (Gothic), #949CB8 (Moon Veil), #434E59 (Abyssal). It mixes gray, blue, turquoise tones and feels cool overall. The strongest text pairing is #D6E1F5 on #434E59 with a contrast ratio of 6.45:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Ashen Whisperrgb(102, 104, 124)hsl(235, 10%, 44%)
Airbornergb(164, 197, 206)hsl(193, 30%, 73%)
Cold Shoulderrgb(214, 225, 245)hsl(219, 61%, 90%)
Gothicrgb(103, 137, 145)hsl(191, 17%, 49%)
Moon Veilrgb(148, 156, 184)hsl(227, 20%, 65%)
Abyssalrgb(67, 78, 89)hsl(210, 14%, 31%)

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.

  • Aa6.45:1 Good#D6E1F5 on #434E59
  • Aa6.45:1 Good#434E59 on #D6E1F5
  • Aa4.63:1 Good#A4C5CE on #434E59
  • Aa4.63:1 Good#434E59 on #A4C5CE
  • Aa4.16:1 Poor#66687C on #D6E1F5
  • Aa4.16:1 Poor#D6E1F5 on #66687C
  • Aa3.12:1 Poor#949CB8 on #434E59
  • Aa3.12:1 Poor#434E59 on #949CB8

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Ashen Whisper to Abyssal — https://swatchly.xyz/palette/66687c-a4c5ce-d6e1f5-678991-949cb8-434e59 */
:root {
  --ashen-whisper: #66687c;
  --airborne: #a4c5ce;
  --cold-shoulder: #d6e1f5;
  --gothic: #678991;
  --moon-veil: #949cb8;
  --abyssal: #434e59;
}

Tailwind CSS v4

/* Ashen Whisper to Abyssal — https://swatchly.xyz/palette/66687c-a4c5ce-d6e1f5-678991-949cb8-434e59 */
@theme {
  --color-ashen-whisper: #66687c;
  --color-ashen-whisper-50: #f3f4ff;
  --color-ashen-whisper-100: #e8eaf8;
  --color-ashen-whisper-200: #d3d5e6;
  --color-ashen-whisper-300: #bcbed1;
  --color-ashen-whisper-400: #9c9eb3;
  --color-ashen-whisper-500: #808397;
  --color-ashen-whisper-600: #66687c;
  --color-ashen-whisper-700: #505264;
  --color-ashen-whisper-800: #3e404f;
  --color-ashen-whisper-900: #30313e;
  --color-ashen-whisper-950: #1d1e27;
  --color-airborne: #a4c5ce;
  --color-airborne-50: #e5f8fd;
  --color-airborne-100: #d9eef4;
  --color-airborne-200: #c1dae1;
  --color-airborne-300: #a4c5ce;
  --color-airborne-400: #87a6ae;
  --color-airborne-500: #6b8b93;
  --color-airborne-600: #527078;
  --color-airborne-700: #3e5a61;
  --color-airborne-800: #2e464d;
  --color-airborne-900: #22373c;
  --color-airborne-950: #132226;
  --color-cold-shoulder: #d6e1f5;
  --color-cold-shoulder-50: #f9fbff;
  --color-cold-shoulder-100: #edf3ff;
  --color-cold-shoulder-200: #d6e1f5;
  --color-cold-shoulder-300: #c0c9d9;
  --color-cold-shoulder-400: #9ea8b9;
  --color-cold-shoulder-500: #818b9d;
  --color-cold-shoulder-600: #656f80;
  --color-cold-shoulder-700: #4e5766;
  --color-cold-shoulder-800: #3b4350;
  --color-cold-shoulder-900: #2d333e;
  --color-cold-shoulder-950: #1b1f28;
  --color-gothic: #678991;
  --color-gothic-50: #e5f9fe;
  --color-gothic-100: #d8eff4;
  --color-gothic-200: #c0dbe1;
  --color-gothic-300: #a6c4cc;
  --color-gothic-400: #83a5ad;
  --color-gothic-500: #678991;
  --color-gothic-600: #4e6f77;
  --color-gothic-700: #3b585f;
  --color-gothic-800: #2c454b;
  --color-gothic-900: #20363b;
  --color-gothic-950: #122225;
  --color-moon-veil: #949cb8;
  --color-moon-veil-50: #f0f3ff;
  --color-moon-veil-100: #e2e8fb;
  --color-moon-veil-200: #cdd4ea;
  --color-moon-veil-300: #b5bcd5;
  --color-moon-veil-400: #949cb8;
  --color-moon-veil-500: #7a819d;
  --color-moon-veil-600: #616881;
  --color-moon-veil-700: #4c5269;
  --color-moon-veil-800: #3b4054;
  --color-moon-veil-900: #2d3142;
  --color-moon-veil-950: #1b1f2b;
  --color-abyssal: #434e59;
  --color-abyssal-50: #eff6fe;
  --color-abyssal-100: #e4ecf5;
  --color-abyssal-200: #cdd7e1;
  --color-abyssal-300: #b4bfca;
  --color-abyssal-400: #929eaa;
  --color-abyssal-500: #75818d;
  --color-abyssal-600: #5b6671;
  --color-abyssal-700: #434e59;
  --color-abyssal-800: #343d45;
  --color-abyssal-900: #272e35;
  --color-abyssal-950: #171c21;
}

Similar palettes