Waterworld to Black Box Color Palette

About this palette

Waterworld to Black Box is a 4-color palette: #007086 (Waterworld), #EDD280 (Kaiser Cheese), #E354C7 (Barbiecore), #002731 (Black Box). It mixes blue, yellow, pink tones and feels balanced overall. The strongest text pairing is #EDD280 on #002731 with a contrast ratio of 10.59:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Waterworld	rgb(0, 112, 134)	hsl(190, 100%, 26%)
Kaiser Cheese	rgb(237, 210, 128)	hsl(45, 75%, 72%)
Barbiecore	rgb(227, 84, 199)	hsl(312, 72%, 61%)
Black Box	rgb(0, 39, 49)	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.

Aa10.59:1 Very good#EDD280 on #002731
Aa10.59:1 Very good#002731 on #EDD280
Aa4.76:1 Good#E354C7 on #002731
Aa4.76:1 Good#002731 on #E354C7
Aa3.86:1 Poor#007086 on #EDD280
Aa3.86:1 Poor#EDD280 on #007086

Color blindness preview

CSS variables

/* Waterworld to Black Box — https://swatchly.xyz/palette/007086-edd280-e354c7-002731 */
:root {
  --waterworld: #007086;
  --kaiser-cheese: #edd280;
  --barbiecore: #e354c7;
  --black-box: #002731;
}

Tailwind CSS v4

/* Waterworld to Black Box — https://swatchly.xyz/palette/007086-edd280-e354c7-002731 */
@theme {
  --color-waterworld: #007086;
  --color-waterworld-50: #e6f9ff;
  --color-waterworld-100: #c7f2ff;
  --color-waterworld-200: #a1e0f2;
  --color-waterworld-300: #80c9de;
  --color-waterworld-400: #55a9c0;
  --color-waterworld-500: #318ca3;
  --color-waterworld-600: #007086;
  --color-waterworld-700: #00596b;
  --color-waterworld-800: #004654;
  --color-waterworld-900: #003642;
  --color-waterworld-950: #00222a;
  --color-kaiser-cheese: #edd280;
  --color-kaiser-cheese-50: #fff2cc;
  --color-kaiser-cheese-100: #f8e7b5;
  --color-kaiser-cheese-200: #edd280;
  --color-kaiser-cheese-300: #d3bc77;
  --color-kaiser-cheese-400: #b69d4f;
  --color-kaiser-cheese-500: #9c822e;
  --color-kaiser-cheese-600: #81680b;
  --color-kaiser-cheese-700: #675200;
  --color-kaiser-cheese-800: #514000;
  --color-kaiser-cheese-900: #3f3100;
  --color-kaiser-cheese-950: #281e00;
  --color-barbiecore: #e354c7;
  --color-barbiecore-50: #ffeaf9;
  --color-barbiecore-100: #ffd7f4;
  --color-barbiecore-200: #ffb3eb;
  --color-barbiecore-300: #ff83e3;
  --color-barbiecore-400: #e354c7;
  --color-barbiecore-500: #c636ac;
  --color-barbiecore-600: #a71790;
  --color-barbiecore-700: #8a0076;
  --color-barbiecore-800: #6e005e;
  --color-barbiecore-900: #58004b;
  --color-barbiecore-950: #3b0032;
  --color-black-box: #002731;
  --color-black-box-50: #e6f9ff;
  --color-black-box-100: #d7f0f8;
  --color-black-box-200: #c0dde7;
  --color-black-box-300: #a6c7d2;
  --color-black-box-400: #83a9b4;
  --color-black-box-500: #688e9a;
  --color-black-box-600: #4f737f;
  --color-black-box-700: #3b5d67;
  --color-black-box-800: #2c4a53;
  --color-black-box-900: #203a42;
  --color-black-box-950: #002731;
}