Black Box to Droplet color palette

002A2FBlack Box 1D3DACDenim 007994Celestial 8882FFPeriwinkle 17B3FFHawaii Morning B1DEFFDroplet

About this palette

Black Box to Droplet is a 6-color cool, gradient palette: #002A2F (Black Box), #1D3DAC (Denim), #007994 (Celestial), #8882FF (Periwinkle), #17B3FF (Hawaii Morning), #B1DEFF (Droplet). It mixes turquoise, blue, purple tones and feels cool overall. The strongest text pairing is #002A2F on #B1DEFF with a contrast ratio of 10.76:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(0, 42, 47)	hsl(186, 100%, 9%)
Denim	rgb(29, 61, 172)	hsl(227, 71%, 39%)
Celestial	rgb(0, 121, 148)	hsl(191, 100%, 29%)
Periwinkle	rgb(136, 130, 255)	hsl(243, 100%, 75%)
Hawaii Morning	rgb(23, 179, 255)	hsl(200, 100%, 55%)
Droplet	rgb(177, 222, 255)	hsl(205, 100%, 85%)

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.

Aa10.76:1 Very good#002A2F on #B1DEFF
Aa10.76:1 Very good#B1DEFF on #002A2F
Aa6.51:1 Good#002A2F on #17B3FF
Aa6.51:1 Good#17B3FF on #002A2F
Aa6.38:1 Good#1D3DAC on #B1DEFF
Aa6.38:1 Good#B1DEFF on #1D3DAC
Aa4.87:1 Good#002A2F on #8882FF
Aa4.87:1 Good#8882FF on #002A2F

Color blindness preview

CSS variables

/* Black Box to Droplet — https://swatchly.xyz/palette/002a2f-1d3dac-007994-8882ff-17b3ff-b1deff */
:root {
  --black-box: #002a2f;
  --denim: #1d3dac;
  --celestial: #007994;
  --periwinkle: #8882ff;
  --hawaii-morning: #17b3ff;
  --droplet: #b1deff;
}

Tailwind CSS v4

/* Black Box to Droplet — https://swatchly.xyz/palette/002a2f-1d3dac-007994-8882ff-17b3ff-b1deff */
@theme {
  --color-black-box: #002a2f;
  --color-black-box-50: #e3fafd;
  --color-black-box-100: #d7f1f5;
  --color-black-box-200: #bfdee3;
  --color-black-box-300: #a5c8cd;
  --color-black-box-400: #83aaaf;
  --color-black-box-500: #678f95;
  --color-black-box-600: #4f757b;
  --color-black-box-700: #3b5f64;
  --color-black-box-800: #2c4c50;
  --color-black-box-900: #203c40;
  --color-black-box-950: #002a2f;
  --color-denim: #1d3dac;
  --color-denim-50: #f1f5ff;
  --color-denim-100: #e2ebff;
  --color-denim-200: #c3d6ff;
  --color-denim-300: #9fbcff;
  --color-denim-400: #6d97ff;
  --color-denim-500: #4c76ea;
  --color-denim-600: #3459c6;
  --color-denim-700: #1d3dac;
  --color-denim-800: #173184;
  --color-denim-900: #0f246b;
  --color-denim-950: #061547;
  --color-celestial: #007994;
  --color-celestial-50: #e7f9ff;
  --color-celestial-100: #cef2ff;
  --color-celestial-200: #a2e4f9;
  --color-celestial-300: #82cee7;
  --color-celestial-400: #57b0cb;
  --color-celestial-500: #3294b0;
  --color-celestial-600: #007994;
  --color-celestial-700: #006076;
  --color-celestial-800: #004b5d;
  --color-celestial-900: #003a48;
  --color-celestial-950: #00242e;
  --color-periwinkle: #8882ff;
  --color-periwinkle-50: #eeefff;
  --color-periwinkle-100: #e0e2ff;
  --color-periwinkle-200: #c7caff;
  --color-periwinkle-300: #abadff;
  --color-periwinkle-400: #8882ff;
  --color-periwinkle-500: #7068e2;
  --color-periwinkle-600: #5a4fc3;
  --color-periwinkle-700: #483ba4;
  --color-periwinkle-800: #382b88;
  --color-periwinkle-900: #2c2070;
  --color-periwinkle-950: #1b124d;
  --color-hawaii-morning: #17b3ff;
  --color-hawaii-morning-50: #f0f9ff;
  --color-hawaii-morning-100: #def1ff;
  --color-hawaii-morning-200: #b8e2ff;
  --color-hawaii-morning-300: #87cfff;
  --color-hawaii-morning-400: #17b3ff;
  --color-hawaii-morning-500: #0095d7;
  --color-hawaii-morning-600: #0078ae;
  --color-hawaii-morning-700: #005e8a;
  --color-hawaii-morning-800: #00496d;
  --color-hawaii-morning-900: #003854;
  --color-hawaii-morning-950: #002236;
  --color-droplet: #b1deff;
  --color-droplet-50: #ecf7ff;
  --color-droplet-100: #d9efff;
  --color-droplet-200: #b1deff;
  --color-droplet-300: #a1c6e2;
  --color-droplet-400: #7ea7c5;
  --color-droplet-500: #618caa;
  --color-droplet-600: #48718e;
  --color-droplet-700: #345a74;
  --color-droplet-800: #25465d;
  --color-droplet-900: #1a3649;
  --color-droplet-950: #0d212f;
}