Splashing Wave to Pitch-Black Forests color palette

53D8FFSplashing Wave 00C1C8Super Rare Jade 00834EBold Irish 004E4CTropical Forest 00301BPitch-Black Forests

Open in generator Export PNG, PDF, ASE…

About this palette

Splashing Wave to Pitch-Black Forests is a 5-color cool, gradient palette: #53D8FF (Splashing Wave), #00C1C8 (Super Rare Jade), #00834E (Bold Irish), #004E4C (Tropical Forest), #00301B (Pitch-Black Forests). It mixes blue, turquoise, green tones and feels cool overall. The strongest text pairing is #53D8FF on #00301B with a contrast ratio of 8.78:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Splashing Wave	rgb(83, 216, 255)	hsl(194, 100%, 66%)
Super Rare Jade	rgb(0, 193, 200)	hsl(182, 100%, 39%)
Bold Irish	rgb(0, 131, 78)	hsl(156, 100%, 26%)
Tropical Forest	rgb(0, 78, 76)	hsl(178, 100%, 15%)
Pitch-Black Forests	rgb(0, 48, 27)	hsl(154, 100%, 9%)

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.

Aa8.78:1 Very good#53D8FF on #00301B
Aa8.78:1 Very good#00301B on #53D8FF
Aa6.58:1 Good#00C1C8 on #00301B
Aa6.58:1 Good#00301B on #00C1C8
Aa5.76:1 Good#53D8FF on #004E4C
Aa5.76:1 Good#004E4C on #53D8FF
Aa4.31:1 Poor#00C1C8 on #004E4C
Aa4.31:1 Poor#004E4C on #00C1C8

Color blindness preview

CSS variables

/* Splashing Wave to Pitch-Black Forests — https://swatchly.xyz/palette/53d8ff-00c1c8-00834e-004e4c-00301b */
:root {
  --splashing-wave: #53d8ff;
  --super-rare-jade: #00c1c8;
  --bold-irish: #00834e;
  --tropical-forest: #004e4c;
  --pitch-black-forests: #00301b;
}

Tailwind CSS v4

/* Splashing Wave to Pitch-Black Forests — https://swatchly.xyz/palette/53d8ff-00c1c8-00834e-004e4c-00301b */
@theme {
  --color-splashing-wave: #53d8ff;
  --color-splashing-wave-50: #edfaff;
  --color-splashing-wave-100: #d6f4ff;
  --color-splashing-wave-200: #a3e8ff;
  --color-splashing-wave-300: #53d8ff;
  --color-splashing-wave-400: #33b6da;
  --color-splashing-wave-500: #0098ba;
  --color-splashing-wave-600: #007a96;
  --color-splashing-wave-700: #006177;
  --color-splashing-wave-800: #004b5d;
  --color-splashing-wave-900: #003948;
  --color-splashing-wave-950: #00242e;
  --color-super-rare-jade: #00c1c8;
  --color-super-rare-jade-50: #e4feff;
  --color-super-rare-jade-100: #c1fdff;
  --color-super-rare-jade-200: #93f0f4;
  --color-super-rare-jade-300: #6cdce2;
  --color-super-rare-jade-400: #00c1c8;
  --color-super-rare-jade-500: #00a0a6;
  --color-super-rare-jade-600: #008186;
  --color-super-rare-jade-700: #00666a;
  --color-super-rare-jade-800: #004f52;
  --color-super-rare-jade-900: #003c3f;
  --color-super-rare-jade-950: #002527;
  --color-bold-irish: #00834e;
  --color-bold-irish-50: #ddffe9;
  --color-bold-irish-100: #c1fcd6;
  --color-bold-irish-200: #a4ecbf;
  --color-bold-irish-300: #84d7a5;
  --color-bold-irish-400: #58ba83;
  --color-bold-irish-500: #339e68;
  --color-bold-irish-600: #00834e;
  --color-bold-irish-700: #00683d;
  --color-bold-irish-800: #00522f;
  --color-bold-irish-900: #003f23;
  --color-bold-irish-950: #002814;
  --color-tropical-forest: #004e4c;
  --color-tropical-forest-50: #dbfdfb;
  --color-tropical-forest-100: #cdf4f2;
  --color-tropical-forest-200: #b3e2e0;
  --color-tropical-forest-300: #97cdca;
  --color-tropical-forest-400: #72afac;
  --color-tropical-forest-500: #549391;
  --color-tropical-forest-600: #3a7876;
  --color-tropical-forest-700: #25615f;
  --color-tropical-forest-800: #004e4c;
  --color-tropical-forest-900: #0c3b3a;
  --color-tropical-forest-950: #042524;
  --color-pitch-black-forests: #00301b;
  --color-pitch-black-forests-50: #e3fded;
  --color-pitch-black-forests-100: #d6f4e2;
  --color-pitch-black-forests-200: #bfe1cc;
  --color-pitch-black-forests-300: #a4ccb4;
  --color-pitch-black-forests-400: #82ae94;
  --color-pitch-black-forests-500: #67947a;
  --color-pitch-black-forests-600: #4f7a61;
  --color-pitch-black-forests-700: #3b644d;
  --color-pitch-black-forests-800: #2c513d;
  --color-pitch-black-forests-900: #214230;
  --color-pitch-black-forests-950: #00301b;
}