Black Stallion to Silent Night Color Palette

About this palette

Black Stallion to Silent Night is a 4-color dark, gradient palette: #00171A (Black Stallion), #003437 (Elite Teal), #343E11 (Dark Olive), #4E686E (Silent Night). It mixes black, turquoise, green, gray tones and feels cool overall. The strongest text pairing is #00171A on #4E686E with a contrast ratio of 3.10:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Stallion	rgb(0, 23, 26)	hsl(187, 100%, 5%)
Elite Teal	rgb(0, 52, 55)	hsl(183, 100%, 11%)
Dark Olive	rgb(52, 62, 17)	hsl(73, 57%, 15%)
Silent Night	rgb(78, 104, 110)	hsl(191, 17%, 37%)

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.

Aa3.10:1 Poor#00171A on #4E686E
Aa3.10:1 Poor#4E686E on #00171A

Color blindness preview

CSS variables

/* Black Stallion to Silent Night — https://swatchly.xyz/palette/00171a-003437-343e11-4e686e */
:root {
  --black-stallion: #00171a;
  --elite-teal: #003437;
  --dark-olive: #343e11;
  --silent-night: #4e686e;
}

Tailwind CSS v4

/* Black Stallion to Silent Night — https://swatchly.xyz/palette/00171a-003437-343e11-4e686e */
@theme {
  --color-black-stallion: #00171a;
  --color-black-stallion-50: #e8f9fb;
  --color-black-stallion-100: #ddeff2;
  --color-black-stallion-200: #c6dcdf;
  --color-black-stallion-300: #adc6c9;
  --color-black-stallion-400: #8ca7ab;
  --color-black-stallion-500: #6e898d;
  --color-black-stallion-600: #526c6f;
  --color-black-stallion-700: #3c5356;
  --color-black-stallion-800: #2a3d3f;
  --color-black-stallion-900: #1c2b2d;
  --color-black-stallion-950: #00171a;
  --color-elite-teal: #003437;
  --color-elite-teal-50: #e1fbfd;
  --color-elite-teal-100: #d4f2f4;
  --color-elite-teal-200: #bcdfe2;
  --color-elite-teal-300: #a1cacc;
  --color-elite-teal-400: #7daaad;
  --color-elite-teal-500: #5f8d90;
  --color-elite-teal-600: #457174;
  --color-elite-teal-700: #30595b;
  --color-elite-teal-800: #214446;
  --color-elite-teal-900: #003437;
  --color-elite-teal-950: #0a1e1f;
  --color-dark-olive: #343e11;
  --color-dark-olive-50: #f1f9de;
  --color-dark-olive-100: #e7f0d1;
  --color-dark-olive-200: #d2ddb9;
  --color-dark-olive-300: #bbc79e;
  --color-dark-olive-400: #9da97c;
  --color-dark-olive-500: #828f61;
  --color-dark-olive-600: #697548;
  --color-dark-olive-700: #545f36;
  --color-dark-olive-800: #434c27;
  --color-dark-olive-900: #343e11;
  --color-dark-olive-950: #21270f;
  --color-silent-night: #4e686e;
  --color-silent-night-50: #e9f9fc;
  --color-silent-night-100: #dbedf2;
  --color-silent-night-200: #c3d9de;
  --color-silent-night-300: #a8c1c7;
  --color-silent-night-400: #86a1a7;
  --color-silent-night-500: #69848a;
  --color-silent-night-600: #4e686e;
  --color-silent-night-700: #3c5358;
  --color-silent-night-800: #2d4145;
  --color-silent-night-900: #213236;
  --color-silent-night-950: #131f22;
}