Black Stallion to Kiss a Frog Color Palette

About this palette

Black Stallion to Kiss a Frog is a 4-color cool palette: #002022 (Black Stallion), #5D4591 (Lords of the Night), #C77963 (Himalayan Salt), #B6C68A (Kiss a Frog). It mixes turquoise, purple, red, green tones and feels cool overall. The strongest text pairing is #002022 on #B6C68A with a contrast ratio of 9.30:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Stallion	rgb(0, 32, 34)	hsl(184, 100%, 7%)
Lords of the Night	rgb(93, 69, 145)	hsl(259, 36%, 42%)
Himalayan Salt	rgb(199, 121, 99)	hsl(13, 47%, 58%)
Kiss a Frog	rgb(182, 198, 138)	hsl(76, 34%, 66%)

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.30:1 Very good#002022 on #B6C68A
Aa9.30:1 Very good#B6C68A on #002022
Aa5.16:1 Good#002022 on #C77963
Aa5.16:1 Good#C77963 on #002022
Aa4.19:1 Poor#5D4591 on #B6C68A
Aa4.19:1 Poor#B6C68A on #5D4591

Color blindness preview

CSS variables

/* Black Stallion to Kiss a Frog — https://swatchly.xyz/palette/002022-5d4591-c77963-b6c68a */
:root {
  --black-stallion: #002022;
  --lords-of-the-night: #5d4591;
  --himalayan-salt: #c77963;
  --kiss-a-frog: #b6c68a;
}

Tailwind CSS v4

/* Black Stallion to Kiss a Frog — https://swatchly.xyz/palette/002022-5d4591-c77963-b6c68a */
@theme {
  --color-black-stallion: #002022;
  --color-black-stallion-50: #e6fafb;
  --color-black-stallion-100: #daf0f1;
  --color-black-stallion-200: #c3dddf;
  --color-black-stallion-300: #aac8c9;
  --color-black-stallion-400: #88a9ab;
  --color-black-stallion-500: #6b8c8e;
  --color-black-stallion-600: #517173;
  --color-black-stallion-700: #3c595a;
  --color-black-stallion-800: #2b4446;
  --color-black-stallion-900: #1e3334;
  --color-black-stallion-950: #002022;
  --color-lords-of-the-night: #5d4591;
  --color-lords-of-the-night-50: #f6f3ff;
  --color-lords-of-the-night-100: #ece7ff;
  --color-lords-of-the-night-200: #dbd0ff;
  --color-lords-of-the-night-300: #c7b4fd;
  --color-lords-of-the-night-400: #a893e2;
  --color-lords-of-the-night-500: #8d76c7;
  --color-lords-of-the-night-600: #735ca9;
  --color-lords-of-the-night-700: #5d4591;
  --color-lords-of-the-night-800: #493573;
  --color-lords-of-the-night-900: #38275c;
  --color-lords-of-the-night-950: #23173c;
  --color-himalayan-salt: #c77963;
  --color-himalayan-salt-50: #fff4f1;
  --color-himalayan-salt-100: #ffeae4;
  --color-himalayan-salt-200: #ffd1c4;
  --color-himalayan-salt-300: #fab5a2;
  --color-himalayan-salt-400: #e0957f;
  --color-himalayan-salt-500: #c77963;
  --color-himalayan-salt-600: #a75d48;
  --color-himalayan-salt-700: #8a4532;
  --color-himalayan-salt-800: #6f3322;
  --color-himalayan-salt-900: #572416;
  --color-himalayan-salt-950: #38140a;
  --color-kiss-a-frog: #b6c68a;
  --color-kiss-a-frog-50: #eff9d6;
  --color-kiss-a-frog-100: #e4efc8;
  --color-kiss-a-frog-200: #cfdbae;
  --color-kiss-a-frog-300: #b6c68a;
  --color-kiss-a-frog-400: #98a76e;
  --color-kiss-a-frog-500: #7d8c52;
  --color-kiss-a-frog-600: #64713a;
  --color-kiss-a-frog-700: #4f5a27;
  --color-kiss-a-frog-800: #3d471a;
  --color-kiss-a-frog-900: #2f3710;
  --color-kiss-a-frog-950: #1c2206;
}