Botanical Night to Splashing Wave color palette

00443DBotanical Night 00656AWakame Green 009D8FGreen Dynasty 56C1F7Blue Mana 4BE2FFSplashing Wave

About this palette

Botanical Night to Splashing Wave is a 5-color cool, gradient palette: #00443D (Botanical Night), #00656A (Wakame Green), #009D8F (Green Dynasty), #56C1F7 (Blue Mana), #4BE2FF (Splashing Wave). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #00443D on #4BE2FF with a contrast ratio of 7.19:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Botanical Night	rgb(0, 68, 61)	hsl(174, 100%, 13%)
Wakame Green	rgb(0, 101, 106)	hsl(183, 100%, 21%)
Green Dynasty	rgb(0, 157, 143)	hsl(175, 100%, 31%)
Blue Mana	rgb(86, 193, 247)	hsl(200, 91%, 65%)
Splashing Wave	rgb(75, 226, 255)	hsl(190, 100%, 65%)

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.

Aa7.19:1 Very good#00443D on #4BE2FF
Aa7.19:1 Very good#4BE2FF on #00443D
Aa5.47:1 Good#00443D on #56C1F7
Aa5.47:1 Good#56C1F7 on #00443D
Aa4.44:1 Poor#00656A on #4BE2FF
Aa4.44:1 Poor#4BE2FF on #00656A
Aa3.38:1 Poor#00656A on #56C1F7
Aa3.38:1 Poor#56C1F7 on #00656A

Color blindness preview

CSS variables

/* Botanical Night to Splashing Wave — https://swatchly.xyz/palette/00443d-00656a-009d8f-56c1f7-4be2ff */
:root {
  --botanical-night: #00443d;
  --wakame-green: #00656a;
  --green-dynasty: #009d8f;
  --blue-mana: #56c1f7;
  --splashing-wave: #4be2ff;
}

Tailwind CSS v4

/* Botanical Night to Splashing Wave — https://swatchly.xyz/palette/00443d-00656a-009d8f-56c1f7-4be2ff */
@theme {
  --color-botanical-night: #00443d;
  --color-botanical-night-50: #ddfdf7;
  --color-botanical-night-100: #d0f4ee;
  --color-botanical-night-200: #b7e2da;
  --color-botanical-night-300: #9bcdc4;
  --color-botanical-night-400: #79afa7;
  --color-botanical-night-500: #5d958d;
  --color-botanical-night-600: #437c73;
  --color-botanical-night-700: #30655e;
  --color-botanical-night-800: #21524b;
  --color-botanical-night-900: #00443d;
  --color-botanical-night-950: #0a2b27;
  --color-wakame-green: #00656a;
  --color-wakame-green-50: #dafdff;
  --color-wakame-green-100: #c6f6f8;
  --color-wakame-green-200: #ace4e8;
  --color-wakame-green-300: #8ed0d4;
  --color-wakame-green-400: #67b2b6;
  --color-wakame-green-500: #47979b;
  --color-wakame-green-600: #2a7c81;
  --color-wakame-green-700: #00656a;
  --color-wakame-green-800: #004f53;
  --color-wakame-green-900: #003d40;
  --color-wakame-green-950: #002629;
  --color-green-dynasty: #009d8f;
  --color-green-dynasty-50: #d8fff8;
  --color-green-dynasty-100: #b9fbf1;
  --color-green-dynasty-200: #99eade;
  --color-green-dynasty-300: #76d6c9;
  --color-green-dynasty-400: #43b8aa;
  --color-green-dynasty-500: #009d8f;
  --color-green-dynasty-600: #007f73;
  --color-green-dynasty-700: #00645b;
  --color-green-dynasty-800: #004f47;
  --color-green-dynasty-900: #003d36;
  --color-green-dynasty-950: #002622;
  --color-blue-mana: #56c1f7;
  --color-blue-mana-50: #ddf2ff;
  --color-blue-mana-100: #c3e9ff;
  --color-blue-mana-200: #90d7ff;
  --color-blue-mana-300: #56c1f7;
  --color-blue-mana-400: #36a3d6;
  --color-blue-mana-500: #0089bc;
  --color-blue-mana-600: #006f99;
  --color-blue-mana-700: #00597c;
  --color-blue-mana-800: #004763;
  --color-blue-mana-900: #00384f;
  --color-blue-mana-950: #002333;
  --color-splashing-wave: #4be2ff;
  --color-splashing-wave-50: #cef6ff;
  --color-splashing-wave-100: #a9efff;
  --color-splashing-wave-200: #4be2ff;
  --color-splashing-wave-300: #4bcbe4;
  --color-splashing-wave-400: #00adc7;
  --color-splashing-wave-500: #0091a7;
  --color-splashing-wave-600: #007688;
  --color-splashing-wave-700: #005e6d;
  --color-splashing-wave-800: #004b58;
  --color-splashing-wave-900: #003a44;
  --color-splashing-wave-950: #00242b;
}