The Count’s Black to Sleepless Blue color palette

15222DThe Count’s Black 514A6BNightly Walk 6F7F55Emerald City B7998BSombrero B8D8EBSleepless Blue

About this palette

The Count’s Black to Sleepless Blue is a 5-color muted, cool palette: #15222D (The Count’s Black), #514A6B (Nightly Walk), #6F7F55 (Emerald City), #B7998B (Sombrero), #B8D8EB (Sleepless Blue). It mixes gray, purple, green, orange, blue tones and feels cool overall. The strongest text pairing is #15222D on #B8D8EB with a contrast ratio of 10.83:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
The Count’s Black	rgb(21, 34, 45)	hsl(208, 36%, 13%)
Nightly Walk	rgb(81, 74, 107)	hsl(253, 18%, 35%)
Emerald City	rgb(111, 127, 85)	hsl(83, 20%, 42%)
Sombrero	rgb(183, 153, 139)	hsl(19, 23%, 63%)
Sleepless Blue	rgb(184, 216, 235)	hsl(202, 56%, 82%)

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.

Aa10.83:1 Very good#15222D on #B8D8EB
Aa10.83:1 Very good#B8D8EB on #15222D
Aa6.12:1 Good#15222D on #B7998B
Aa6.12:1 Good#B7998B on #15222D
Aa5.53:1 Good#514A6B on #B8D8EB
Aa5.53:1 Good#B8D8EB on #514A6B
Aa3.73:1 Poor#15222D on #6F7F55
Aa3.73:1 Poor#6F7F55 on #15222D

Color blindness preview

CSS variables

/* The Count’s Black to Sleepless Blue — https://swatchly.xyz/palette/15222d-514a6b-6f7f55-b7998b-b8d8eb */
:root {
  --the-count-s-black: #15222d;
  --nightly-walk: #514a6b;
  --emerald-city: #6f7f55;
  --sombrero: #b7998b;
  --sleepless-blue: #b8d8eb;
}

Tailwind CSS v4

/* The Count’s Black to Sleepless Blue — https://swatchly.xyz/palette/15222d-514a6b-6f7f55-b7998b-b8d8eb */
@theme {
  --color-the-count-s-black: #15222d;
  --color-the-count-s-black-50: #edf7ff;
  --color-the-count-s-black-100: #e2edf6;
  --color-the-count-s-black-200: #cdd9e4;
  --color-the-count-s-black-300: #b5c3d0;
  --color-the-count-s-black-400: #94a4b1;
  --color-the-count-s-black-500: #798996;
  --color-the-count-s-black-600: #5f6e7b;
  --color-the-count-s-black-700: #4a5864;
  --color-the-count-s-black-800: #39454f;
  --color-the-count-s-black-900: #2b353e;
  --color-the-count-s-black-950: #15222d;
  --color-nightly-walk: #514a6b;
  --color-nightly-walk-50: #f5f3ff;
  --color-nightly-walk-100: #ece8ff;
  --color-nightly-walk-200: #d7d2ef;
  --color-nightly-walk-300: #c0badb;
  --color-nightly-walk-400: #9f99bd;
  --color-nightly-walk-500: #837ca0;
  --color-nightly-walk-600: #686183;
  --color-nightly-walk-700: #514a6b;
  --color-nightly-walk-800: #3f3953;
  --color-nightly-walk-900: #302c41;
  --color-nightly-walk-950: #1d1a2a;
  --color-emerald-city: #6f7f55;
  --color-emerald-city-50: #effae0;
  --color-emerald-city-100: #e7f3d7;
  --color-emerald-city-200: #d5e2c1;
  --color-emerald-city-300: #bfcea9;
  --color-emerald-city-400: #a1b188;
  --color-emerald-city-500: #87986d;
  --color-emerald-city-600: #6f7f55;
  --color-emerald-city-700: #57653e;
  --color-emerald-city-800: #434f2d;
  --color-emerald-city-900: #323d1f;
  --color-emerald-city-950: #1e2610;
  --color-sombrero: #b7998b;
  --color-sombrero-50: #fff2eb;
  --color-sombrero-100: #fae6dc;
  --color-sombrero-200: #e9d1c6;
  --color-sombrero-300: #d4b9ad;
  --color-sombrero-400: #b7998b;
  --color-sombrero-500: #9b7e71;
  --color-sombrero-600: #7f6457;
  --color-sombrero-700: #674e43;
  --color-sombrero-800: #523d32;
  --color-sombrero-900: #402e25;
  --color-sombrero-950: #291c16;
  --color-sleepless-blue: #b8d8eb;
  --color-sleepless-blue-50: #e4f5ff;
  --color-sleepless-blue-100: #d6ebf7;
  --color-sleepless-blue-200: #b8d8eb;
  --color-sleepless-blue-300: #a6c2d2;
  --color-sleepless-blue-400: #86a3b5;
  --color-sleepless-blue-500: #6b899a;
  --color-sleepless-blue-600: #526f7f;
  --color-sleepless-blue-700: #3f5967;
  --color-sleepless-blue-800: #2f4653;
  --color-sleepless-blue-900: #223641;
  --color-sleepless-blue-950: #132129;
}