Black Stallion to Snow White color palette

001B21Black Stallion 004C56Nocturnal Expedition 7D577ADr Who E17C6BBite My Tongue 9AD5A6Garden Goddess E8FFE6Snow White

Open in generator Export PNG, PDF, ASE…

About this palette

Black Stallion to Snow White is a 6-color cool palette: #001B21 (Black Stallion), #004C56 (Nocturnal Expedition), #7D577A (Dr Who), #E17C6B (Bite My Tongue), #9AD5A6 (Garden Goddess), #E8FFE6 (Snow White). It mixes turquoise, pink, red, green, white tones and feels cool overall. The strongest text pairing is #001B21 on #E8FFE6 with a contrast ratio of 16.86:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Stallion	rgb(0, 27, 33)	hsl(191, 100%, 6%)
Nocturnal Expedition	rgb(0, 76, 86)	hsl(187, 100%, 17%)
Dr Who	rgb(125, 87, 122)	hsl(305, 18%, 42%)
Bite My Tongue	rgb(225, 124, 107)	hsl(9, 66%, 65%)
Garden Goddess	rgb(154, 213, 166)	hsl(132, 41%, 72%)
Snow White	rgb(232, 255, 230)	hsl(115, 100%, 95%)

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.86:1 Super#001B21 on #E8FFE6
Aa16.86:1 Super#E8FFE6 on #001B21
Aa10.56:1 Very good#001B21 on #9AD5A6
Aa10.56:1 Very good#9AD5A6 on #001B21
Aa9.17:1 Very good#004C56 on #E8FFE6
Aa9.17:1 Very good#E8FFE6 on #004C56
Aa6.19:1 Good#001B21 on #E17C6B
Aa6.19:1 Good#E17C6B on #001B21

Color blindness preview

CSS variables

/* Black Stallion to Snow White — https://swatchly.xyz/palette/001b21-004c56-7d577a-e17c6b-9ad5a6-e8ffe6 */
:root {
  --black-stallion: #001b21;
  --nocturnal-expedition: #004c56;
  --dr-who: #7d577a;
  --bite-my-tongue: #e17c6b;
  --garden-goddess: #9ad5a6;
  --snow-white: #e8ffe6;
}

Tailwind CSS v4

/* Black Stallion to Snow White — https://swatchly.xyz/palette/001b21-004c56-7d577a-e17c6b-9ad5a6-e8ffe6 */
@theme {
  --color-black-stallion: #001b21;
  --color-black-stallion-50: #e7f9fd;
  --color-black-stallion-100: #dbeff4;
  --color-black-stallion-200: #c5dce2;
  --color-black-stallion-300: #abc6cd;
  --color-black-stallion-400: #8aa8af;
  --color-black-stallion-500: #6c8a92;
  --color-black-stallion-600: #516e75;
  --color-black-stallion-700: #3b555b;
  --color-black-stallion-800: #2a4045;
  --color-black-stallion-900: #1d2f33;
  --color-black-stallion-950: #001b21;
  --color-nocturnal-expedition: #004c56;
  --color-nocturnal-expedition-50: #e2fbff;
  --color-nocturnal-expedition-100: #cdf3fa;
  --color-nocturnal-expedition-200: #b3e1e9;
  --color-nocturnal-expedition-300: #97ccd5;
  --color-nocturnal-expedition-400: #72adb7;
  --color-nocturnal-expedition-500: #54929c;
  --color-nocturnal-expedition-600: #397681;
  --color-nocturnal-expedition-700: #255f68;
  --color-nocturnal-expedition-800: #004c56;
  --color-nocturnal-expedition-900: #0c3a41;
  --color-nocturnal-expedition-950: #042429;
  --color-dr-who: #7d577a;
  --color-dr-who-50: #fff0fd;
  --color-dr-who-100: #fce0f9;
  --color-dr-who-200: #eac9e7;
  --color-dr-who-300: #d5b0d1;
  --color-dr-who-400: #b68eb2;
  --color-dr-who-500: #997296;
  --color-dr-who-600: #7d577a;
  --color-dr-who-700: #654362;
  --color-dr-who-800: #50334e;
  --color-dr-who-900: #3f263d;
  --color-dr-who-950: #281727;
  --color-bite-my-tongue: #e17c6b;
  --color-bite-my-tongue-50: #ffefec;
  --color-bite-my-tongue-100: #ffe1db;
  --color-bite-my-tongue-200: #ffc4b9;
  --color-bite-my-tongue-300: #fca191;
  --color-bite-my-tongue-400: #e17c6b;
  --color-bite-my-tongue-500: #c36151;
  --color-bite-my-tongue-600: #a5483a;
  --color-bite-my-tongue-700: #883428;
  --color-bite-my-tongue-800: #6f251b;
  --color-bite-my-tongue-900: #591a11;
  --color-bite-my-tongue-950: #3b0d07;
  --color-garden-goddess: #9ad5a6;
  --color-garden-goddess-50: #e5ffe9;
  --color-garden-goddess-100: #d5f8db;
  --color-garden-goddess-200: #bce7c4;
  --color-garden-goddess-300: #9ad5a6;
  --color-garden-goddess-400: #7db488;
  --color-garden-goddess-500: #5f986c;
  --color-garden-goddess-600: #447c52;
  --color-garden-goddess-700: #30633d;
  --color-garden-goddess-800: #204e2d;
  --color-garden-goddess-900: #153c20;
  --color-garden-goddess-950: #0a2612;
  --color-snow-white: #e8ffe6;
  --color-snow-white-50: #e8ffe6;
  --color-snow-white-100: #e4f2e3;
  --color-snow-white-200: #cedecc;
  --color-snow-white-300: #b5c8b4;
  --color-snow-white-400: #94a993;
  --color-snow-white-500: #798d77;
  --color-snow-white-600: #5e725d;
  --color-snow-white-700: #495b48;
  --color-snow-white-800: #384737;
  --color-snow-white-900: #2a3729;
  --color-snow-white-950: #192218;
}