Thunderbolt to Black Box color palette

FFEBACThunderbolt F285FFPinkling CE32B9Loudicious Pink 006F78Pine Scented Lagoon 002E32Black Box

About this palette

Thunderbolt to Black Box is a 5-color cool, neon palette: #FFEBAC (Thunderbolt), #F285FF (Pinkling), #CE32B9 (Loudicious Pink), #006F78 (Pine Scented Lagoon), #002E32 (Black Box). It mixes yellow, pink, turquoise tones and feels cool overall. The strongest text pairing is #FFEBAC on #002E32 with a contrast ratio of 12.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Thunderbolt	rgb(255, 235, 172)	hsl(46, 100%, 84%)
Pinkling	rgb(242, 133, 255)	hsl(294, 100%, 76%)
Loudicious Pink	rgb(206, 50, 185)	hsl(308, 61%, 50%)
Pine Scented Lagoon	rgb(0, 111, 120)	hsl(184, 100%, 24%)
Black Box	rgb(0, 46, 50)	hsl(185, 100%, 10%)

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.

Aa12.34:1 Super#FFEBAC on #002E32
Aa12.34:1 Super#002E32 on #FFEBAC
Aa6.66:1 Good#F285FF on #002E32
Aa6.66:1 Good#002E32 on #F285FF
Aa5.00:1 Good#FFEBAC on #006F78
Aa5.00:1 Good#006F78 on #FFEBAC
Aa3.71:1 Poor#FFEBAC on #CE32B9
Aa3.71:1 Poor#CE32B9 on #FFEBAC

Color blindness preview

CSS variables

/* Thunderbolt to Black Box — https://swatchly.xyz/palette/ffebac-f285ff-ce32b9-006f78-002e32 */
:root {
  --thunderbolt: #ffebac;
  --pinkling: #f285ff;
  --loudicious-pink: #ce32b9;
  --pine-scented-lagoon: #006f78;
  --black-box: #002e32;
}

Tailwind CSS v4

/* Thunderbolt to Black Box — https://swatchly.xyz/palette/ffebac-f285ff-ce32b9-006f78-002e32 */
@theme {
  --color-thunderbolt: #ffebac;
  --color-thunderbolt-50: #fff5d7;
  --color-thunderbolt-100: #ffebac;
  --color-thunderbolt-200: #e6d8aa;
  --color-thunderbolt-300: #d1c18d;
  --color-thunderbolt-400: #b3a167;
  --color-thunderbolt-500: #988549;
  --color-thunderbolt-600: #7c6a2f;
  --color-thunderbolt-700: #64541c;
  --color-thunderbolt-800: #4f410e;
  --color-thunderbolt-900: #3e3205;
  --color-thunderbolt-950: #271e01;
  --color-pinkling: #f285ff;
  --color-pinkling-50: #fde8ff;
  --color-pinkling-100: #fbd6ff;
  --color-pinkling-200: #f7b2ff;
  --color-pinkling-300: #f285ff;
  --color-pinkling-400: #d168dd;
  --color-pinkling-500: #b64bc3;
  --color-pinkling-600: #9931a6;
  --color-pinkling-700: #7f1c8a;
  --color-pinkling-800: #670c72;
  --color-pinkling-900: #53035c;
  --color-pinkling-950: #37003d;
  --color-loudicious-pink: #ce32b9;
  --color-loudicious-pink-50: #ffeffb;
  --color-loudicious-pink-100: #ffdef7;
  --color-loudicious-pink-200: #ffbcf1;
  --color-loudicious-pink-300: #ff90ea;
  --color-loudicious-pink-400: #ec59d6;
  --color-loudicious-pink-500: #ce32b9;
  --color-loudicious-pink-600: #ae049c;
  --color-loudicious-pink-700: #8c007d;
  --color-loudicious-pink-800: #6f0063;
  --color-loudicious-pink-900: #58004e;
  --color-loudicious-pink-950: #390032;
  --color-pine-scented-lagoon: #006f78;
  --color-pine-scented-lagoon-50: #defcff;
  --color-pine-scented-lagoon-100: #c0f4fa;
  --color-pine-scented-lagoon-200: #a1e0e7;
  --color-pine-scented-lagoon-300: #80c9d2;
  --color-pine-scented-lagoon-400: #55a9b2;
  --color-pine-scented-lagoon-500: #328c95;
  --color-pine-scented-lagoon-600: #006f78;
  --color-pine-scented-lagoon-700: #00585f;
  --color-pine-scented-lagoon-800: #00454b;
  --color-pine-scented-lagoon-900: #00363a;
  --color-pine-scented-lagoon-950: #002225;
  --color-black-box: #002e32;
  --color-black-box-50: #e2fbfd;
  --color-black-box-100: #d6f1f4;
  --color-black-box-200: #bedfe2;
  --color-black-box-300: #a4c9cd;
  --color-black-box-400: #81aaae;
  --color-black-box-500: #669195;
  --color-black-box-600: #4e777b;
  --color-black-box-700: #3b6265;
  --color-black-box-800: #2c4f53;
  --color-black-box-900: #214043;
  --color-black-box-950: #002e32;
}