Black Box to Water Color Palette

About this palette

Black Box to Water is a 4-color cool, monochromatic, gradient palette: #002C35 (Black Box), #006A82 (Teal With It), #38A4BD (True Sky Blue), #D4F2FF (Water). It mixes blue, white tones and feels cool overall. The strongest text pairing is #002C35 on #D4F2FF with a contrast ratio of 12.71:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(0, 44, 53)	hsl(190, 100%, 10%)
Teal With It	rgb(0, 106, 130)	hsl(191, 100%, 25%)
True Sky Blue	rgb(56, 164, 189)	hsl(191, 54%, 48%)
Water	rgb(212, 242, 255)	hsl(198, 100%, 92%)

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.71:1 Super#002C35 on #D4F2FF
Aa12.71:1 Super#D4F2FF on #002C35
Aa5.30:1 Good#006A82 on #D4F2FF
Aa5.30:1 Good#D4F2FF on #006A82
Aa5.11:1 Good#002C35 on #38A4BD
Aa5.11:1 Good#38A4BD on #002C35

Color blindness preview

CSS variables

/* Black Box to Water — https://swatchly.xyz/palette/002c35-006a82-38a4bd-d4f2ff */
:root {
  --black-box: #002c35;
  --teal-with-it: #006a82;
  --true-sky-blue: #38a4bd;
  --water: #d4f2ff;
}

Tailwind CSS v4

/* Black Box to Water — https://swatchly.xyz/palette/002c35-006a82-38a4bd-d4f2ff */
@theme {
  --color-black-box: #002c35;
  --color-black-box-50: #e5faff;
  --color-black-box-100: #d6f1f8;
  --color-black-box-200: #bedee6;
  --color-black-box-300: #a4c8d2;
  --color-black-box-400: #81a9b4;
  --color-black-box-500: #668f9a;
  --color-black-box-600: #4e7680;
  --color-black-box-700: #3b6069;
  --color-black-box-800: #2c4d56;
  --color-black-box-900: #213e45;
  --color-black-box-950: #002c35;
  --color-teal-with-it: #006a82;
  --color-teal-with-it-50: #e7f9ff;
  --color-teal-with-it-100: #cef2ff;
  --color-teal-with-it-200: #aae4f8;
  --color-teal-with-it-300: #8dd0e7;
  --color-teal-with-it-400: #66b3cc;
  --color-teal-with-it-500: #479ab3;
  --color-teal-with-it-600: #298098;
  --color-teal-with-it-700: #006a82;
  --color-teal-with-it-800: #005366;
  --color-teal-with-it-900: #004050;
  --color-teal-with-it-950: #002833;
  --color-true-sky-blue: #38a4bd;
  --color-true-sky-blue-50: #d9f7ff;
  --color-true-sky-blue-100: #b6efff;
  --color-true-sky-blue-200: #90dcf1;
  --color-true-sky-blue-300: #6bc5dc;
  --color-true-sky-blue-400: #38a4bd;
  --color-true-sky-blue-500: #0d8aa3;
  --color-true-sky-blue-600: #007085;
  --color-true-sky-blue-700: #00596a;
  --color-true-sky-blue-800: #004755;
  --color-true-sky-blue-900: #003843;
  --color-true-sky-blue-950: #00242c;
  --color-water: #d4f2ff;
  --color-water-50: #ebf9ff;
  --color-water-100: #d4f2ff;
  --color-water-200: #c7dde6;
  --color-water-300: #aec6d1;
  --color-water-400: #8ca7b3;
  --color-water-500: #708b97;
  --color-water-600: #56717c;
  --color-water-700: #415964;
  --color-water-800: #31464f;
  --color-water-900: #24363d;
  --color-water-950: #152127;
}