Black Box to Pink color palette

About this palette

Black Box to Pink is a 5-color cool palette: #002B2C (Black Box), #513D66 (Meteorite), #864792 (Prunella), #83A643 (Lime It or Leave It), #FFC1CD (Pink). It mixes turquoise, purple, green, pink tones and feels cool overall. The strongest text pairing is #002B2C on #FFC1CD with a contrast ratio of 9.96:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Black Boxrgb(0, 43, 44)hsl(181, 100%, 9%)
Meteoritergb(81, 61, 102)hsl(269, 25%, 32%)
Prunellargb(134, 71, 146)hsl(290, 35%, 43%)
Lime It or Leave Itrgb(131, 166, 67)hsl(81, 42%, 46%)
Pinkrgb(255, 193, 205)hsl(348, 100%, 88%)

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.96:1 Very good#002B2C on #FFC1CD
  • Aa9.96:1 Very good#FFC1CD on #002B2C
  • Aa6.23:1 Good#513D66 on #FFC1CD
  • Aa6.23:1 Good#FFC1CD on #513D66
  • Aa5.43:1 Good#002B2C on #83A643
  • Aa5.43:1 Good#83A643 on #002B2C
  • Aa4.13:1 Poor#864792 on #FFC1CD
  • Aa4.13:1 Poor#FFC1CD on #864792

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Black Box to Pink — https://swatchly.xyz/palette/002b2c-513d66-864792-83a643-ffc1cd */
:root {
  --black-box: #002b2c;
  --meteorite: #513d66;
  --prunella: #864792;
  --lime-it-or-leave-it: #83a643;
  --pink: #ffc1cd;
}

Tailwind CSS v4

/* Black Box to Pink — https://swatchly.xyz/palette/002b2c-513d66-864792-83a643-ffc1cd */
@theme {
  --color-black-box: #002b2c;
  --color-black-box-50: #e3fbfb;
  --color-black-box-100: #d7f1f1;
  --color-black-box-200: #bfdfdf;
  --color-black-box-300: #a5c9c9;
  --color-black-box-400: #83aaab;
  --color-black-box-500: #679091;
  --color-black-box-600: #4f7677;
  --color-black-box-700: #3b6060;
  --color-black-box-800: #2c4d4d;
  --color-black-box-900: #213d3e;
  --color-black-box-950: #002b2c;
  --color-meteorite: #513d66;
  --color-meteorite-50: #f8f2ff;
  --color-meteorite-100: #f1e5ff;
  --color-meteorite-200: #e0cff4;
  --color-meteorite-300: #cbb8e2;
  --color-meteorite-400: #ae99c6;
  --color-meteorite-500: #947eac;
  --color-meteorite-600: #7a6590;
  --color-meteorite-700: #635078;
  --color-meteorite-800: #513d66;
  --color-meteorite-900: #3e2f4e;
  --color-meteorite-950: #271d33;
  --color-prunella: #864792;
  --color-prunella-50: #fdf0ff;
  --color-prunella-100: #fadfff;
  --color-prunella-200: #f4bffd;
  --color-prunella-300: #dfa4ea;
  --color-prunella-400: #c180cd;
  --color-prunella-500: #a363b0;
  --color-prunella-600: #864792;
  --color-prunella-700: #6c3577;
  --color-prunella-800: #572760;
  --color-prunella-900: #441c4c;
  --color-prunella-950: #2c0f32;
  --color-lime-it-or-leave-it: #83a643;
  --color-lime-it-or-leave-it-50: #e5fcc4;
  --color-lime-it-or-leave-it-100: #d7f1b2;
  --color-lime-it-or-leave-it-200: #bfdd92;
  --color-lime-it-or-leave-it-300: #a5c670;
  --color-lime-it-or-leave-it-400: #83a643;
  --color-lime-it-or-leave-it-500: #6a8c25;
  --color-lime-it-or-leave-it-600: #537200;
  --color-lime-it-or-leave-it-700: #415b00;
  --color-lime-it-or-leave-it-800: #334800;
  --color-lime-it-or-leave-it-900: #273800;
  --color-lime-it-or-leave-it-950: #182400;
  --color-pink: #ffc1cd;
  --color-pink-50: #ffeef1;
  --color-pink-100: #ffdfe5;
  --color-pink-200: #ffc1cd;
  --color-pink-300: #e3aeb8;
  --color-pink-400: #c68e99;
  --color-pink-500: #ab727e;
  --color-pink-600: #8e5965;
  --color-pink-700: #74454f;
  --color-pink-800: #5e343d;
  --color-pink-900: #4a272f;
  --color-pink-950: #30161c;
}

Similar palettes