The Count’s Black to Fail Whale color palette

12202EThe Count’s Black 285178Slumber 4E7BC6Serenity’s Reign 87AFD8Birdie Num Num A2CAF3Fail Whale

About this palette

The Count’s Black to Fail Whale is a 5-color cool, monochromatic, gradient palette: #12202E (The Count’s Black), #285178 (Slumber), #4E7BC6 (Serenity’s Reign), #87AFD8 (Birdie Num Num), #A2CAF3 (Fail Whale). It mixes gray, blue tones and feels cool overall. The strongest text pairing is #12202E on #A2CAF3 with a contrast ratio of 9.65:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
The Count’s Black	rgb(18, 32, 46)	hsl(210, 44%, 13%)
Slumber	rgb(40, 81, 120)	hsl(209, 50%, 31%)
Serenity’s Reign	rgb(78, 123, 198)	hsl(218, 51%, 54%)
Birdie Num Num	rgb(135, 175, 216)	hsl(210, 51%, 69%)
Fail Whale	rgb(162, 202, 243)	hsl(210, 77%, 79%)

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.

Aa9.65:1 Very good#12202E on #A2CAF3
Aa9.65:1 Very good#A2CAF3 on #12202E
Aa7.20:1 Very good#12202E on #87AFD8
Aa7.20:1 Very good#87AFD8 on #12202E
Aa4.84:1 Good#285178 on #A2CAF3
Aa4.84:1 Good#A2CAF3 on #285178
Aa3.91:1 Poor#12202E on #4E7BC6
Aa3.91:1 Poor#4E7BC6 on #12202E

Color blindness preview

CSS variables

/* The Count’s Black to Fail Whale — https://swatchly.xyz/palette/12202e-285178-4e7bc6-87afd8-a2caf3 */
:root {
  --the-count-s-black: #12202e;
  --slumber: #285178;
  --serenity-s-reign: #4e7bc6;
  --birdie-num-num: #87afd8;
  --fail-whale: #a2caf3;
}

Tailwind CSS v4

/* The Count’s Black to Fail Whale — https://swatchly.xyz/palette/12202e-285178-4e7bc6-87afd8-a2caf3 */
@theme {
  --color-the-count-s-black: #12202e;
  --color-the-count-s-black-50: #eef6ff;
  --color-the-count-s-black-100: #e1edf9;
  --color-the-count-s-black-200: #ccd9e8;
  --color-the-count-s-black-300: #b3c3d3;
  --color-the-count-s-black-400: #93a4b5;
  --color-the-count-s-black-500: #77889a;
  --color-the-count-s-black-600: #5d6e7e;
  --color-the-count-s-black-700: #485766;
  --color-the-count-s-black-800: #374351;
  --color-the-count-s-black-900: #29343f;
  --color-the-count-s-black-950: #12202e;
  --color-slumber: #285178;
  --color-slumber-50: #eef6ff;
  --color-slumber-100: #dcedff;
  --color-slumber-200: #b8dafd;
  --color-slumber-300: #9cc2ea;
  --color-slumber-400: #78a2cc;
  --color-slumber-500: #5b85af;
  --color-slumber-600: #416990;
  --color-slumber-700: #285178;
  --color-slumber-800: #203f5d;
  --color-slumber-900: #16304a;
  --color-slumber-950: #0a1d30;
  --color-serenity-s-reign: #4e7bc6;
  --color-serenity-s-reign-50: #edf4ff;
  --color-serenity-s-reign-100: #dae8ff;
  --color-serenity-s-reign-200: #b9d3ff;
  --color-serenity-s-reign-300: #91bbff;
  --color-serenity-s-reign-400: #6b99e4;
  --color-serenity-s-reign-500: #4e7bc6;
  --color-serenity-s-reign-600: #3862a8;
  --color-serenity-s-reign-700: #274d8c;
  --color-serenity-s-reign-800: #1b3c73;
  --color-serenity-s-reign-900: #122e5d;
  --color-serenity-s-reign-950: #081c3e;
  --color-birdie-num-num: #87afd8;
  --color-birdie-num-num-50: #f4f9ff;
  --color-birdie-num-num-100: #e5f2ff;
  --color-birdie-num-num-200: #c5e1ff;
  --color-birdie-num-num-300: #abcdef;
  --color-birdie-num-num-400: #87afd8;
  --color-birdie-num-num-500: #6b91b9;
  --color-birdie-num-num-600: #4f759b;
  --color-birdie-num-num-700: #3a5c7f;
  --color-birdie-num-num-800: #294765;
  --color-birdie-num-num-900: #1c364f;
  --color-birdie-num-num-950: #0e2132;
  --color-fail-whale: #a2caf3;
  --color-fail-whale-50: #f2f8ff;
  --color-fail-whale-100: #e2f0ff;
  --color-fail-whale-200: #c2dffd;
  --color-fail-whale-300: #a2caf3;
  --color-fail-whale-400: #84a9cf;
  --color-fail-whale-500: #678db3;
  --color-fail-whale-600: #4d7196;
  --color-fail-whale-700: #38597a;
  --color-fail-whale-800: #284562;
  --color-fail-whale-900: #1c354d;
  --color-fail-whale-950: #0f2132;
}