Water to Black Box Color Palette

About this palette

Water to Black Box is a 4-color muted, cool, monochromatic, gradient palette: #D7F3FF (Water), #6CB0C5 (Blue Eye Samurai), #386B7E (Ocean’s Embrace), #002A35 (Black Box). It mixes white, blue tones and feels cool overall. The strongest text pairing is #D7F3FF on #002A35 with a contrast ratio of 13.13:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water	rgb(215, 243, 255)	hsl(198, 100%, 92%)
Blue Eye Samurai	rgb(108, 176, 197)	hsl(194, 43%, 60%)
Ocean’s Embrace	rgb(56, 107, 126)	hsl(196, 38%, 36%)
Black Box	rgb(0, 42, 53)	hsl(192, 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.

Aa13.13:1 Super#D7F3FF on #002A35
Aa13.13:1 Super#002A35 on #D7F3FF
Aa6.26:1 Good#6CB0C5 on #002A35
Aa6.26:1 Good#002A35 on #6CB0C5
Aa5.08:1 Good#D7F3FF on #386B7E
Aa5.08:1 Good#386B7E on #D7F3FF

Color blindness preview

CSS variables

/* Water to Black Box — https://swatchly.xyz/palette/d7f3ff-6cb0c5-386b7e-002a35 */
:root {
  --water: #d7f3ff;
  --blue-eye-samurai: #6cb0c5;
  --ocean-s-embrace: #386b7e;
  --black-box: #002a35;
}

Tailwind CSS v4

/* Water to Black Box — https://swatchly.xyz/palette/d7f3ff-6cb0c5-386b7e-002a35 */
@theme {
  --color-water: #d7f3ff;
  --color-water-50: #edfaff;
  --color-water-100: #d7f3ff;
  --color-water-200: #c9dde6;
  --color-water-300: #b0c7d1;
  --color-water-400: #8ea7b2;
  --color-water-500: #728c96;
  --color-water-600: #58717b;
  --color-water-700: #435962;
  --color-water-800: #32464e;
  --color-water-900: #25363d;
  --color-water-950: #152126;
  --color-blue-eye-samurai: #6cb0c5;
  --color-blue-eye-samurai-50: #e9faff;
  --color-blue-eye-samurai-100: #d1f4ff;
  --color-blue-eye-samurai-200: #b2e3f3;
  --color-blue-eye-samurai-300: #95cee0;
  --color-blue-eye-samurai-400: #6cb0c5;
  --color-blue-eye-samurai-500: #5093a8;
  --color-blue-eye-samurai-600: #34788b;
  --color-blue-eye-samurai-700: #1e6071;
  --color-blue-eye-samurai-800: #0e4b5a;
  --color-blue-eye-samurai-900: #043a47;
  --color-blue-eye-samurai-950: #01242d;
  --color-ocean-s-embrace: #386b7e;
  --color-ocean-s-embrace-50: #e8f8ff;
  --color-ocean-s-embrace-100: #cff0fd;
  --color-ocean-s-embrace-200: #b4dcec;
  --color-ocean-s-embrace-300: #97c4d7;
  --color-ocean-s-embrace-400: #72a4b8;
  --color-ocean-s-embrace-500: #54879b;
  --color-ocean-s-embrace-600: #386b7e;
  --color-ocean-s-embrace-700: #285565;
  --color-ocean-s-embrace-800: #1b4351;
  --color-ocean-s-embrace-900: #123440;
  --color-ocean-s-embrace-950: #082029;
  --color-black-box: #002a35;
  --color-black-box-50: #e7f9ff;
  --color-black-box-100: #d6f0f9;
  --color-black-box-200: #bfdee8;
  --color-black-box-300: #a5c8d4;
  --color-black-box-400: #82a9b6;
  --color-black-box-500: #678f9c;
  --color-black-box-600: #4e7581;
  --color-black-box-700: #3b5f6a;
  --color-black-box-800: #2c4c56;
  --color-black-box-900: #203c45;
  --color-black-box-950: #002a35;
}