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
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Black Box | rgb(0, 43, 44) | hsl(181, 100%, 9%) | |
| Meteorite | rgb(81, 61, 102) | hsl(269, 25%, 32%) | |
| Prunella | rgb(134, 71, 146) | hsl(290, 35%, 43%) | |
| Lime It or Leave It | rgb(131, 166, 67) | hsl(81, 42%, 46%) | |
| Pink | rgb(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 #002B2C on #FFC1CD
- Aa9.96:1 #FFC1CD on #002B2C
- Aa6.23:1 #513D66 on #FFC1CD
- Aa6.23:1 #FFC1CD on #513D66
- Aa5.43:1 #002B2C on #83A643
- Aa5.43:1 #83A643 on #002B2C
- Aa4.13:1 #864792 on #FFC1CD
- Aa4.13:1 #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
- 0C37234E4277F4C8D27E69A779AA86Pitch-Black Forests to Green Goddess
- B6B500FFD1CF7D63BF4C4590003132Lush Bamboo to Elite Teal
- 14233E54386F8A653193A670FADAB5Dark Eclipse to Young Apricot
- 092625A198689C6D7D424564C9CBE0Sunken Ship to Dust of the Moon
- 1521135F4A6F678E5348BAD4FFD9CDNightmare to Yours Truly
- FFDDB2D8A71065A8473F91177E469A2D4069Such a Peach to Nightlife
- 794C5F389C7BF2C3DB172C25Nocturne Red to Swamp Thing
- 6DBB3B001E31FFCCA07B2E728B5B86Jubilant Meadow to Muted Purple