Water Leaf to Dolphin Color Palette

About this palette

Water Leaf to Dolphin is a 5-color cool palette: #BCE9E2 (Water Leaf), #006156 (Philodendron), #01351C (Pitch-Black Forests), #5D9268 (Paying Mantis), #7EC0D8 (Dolphin). It mixes turquoise, green, blue tones and feels cool overall. The strongest text pairing is #BCE9E2 on #01351C with a contrast ratio of 10.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water Leaf	rgb(188, 233, 226)	hsl(171, 51%, 83%)
Philodendron	rgb(0, 97, 86)	hsl(173, 100%, 19%)
Pitch-Black Forests	rgb(1, 53, 28)	hsl(151, 96%, 11%)
Paying Mantis	rgb(93, 146, 104)	hsl(132, 22%, 47%)
Dolphin	rgb(126, 192, 216)	hsl(196, 54%, 67%)

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.41:1 Very good#BCE9E2 on #01351C
Aa10.41:1 Very good#01351C on #BCE9E2
Aa6.82:1 Good#01351C on #7EC0D8
Aa6.82:1 Good#7EC0D8 on #01351C
Aa5.59:1 Good#BCE9E2 on #006156
Aa5.59:1 Good#006156 on #BCE9E2
Aa3.78:1 Poor#01351C on #5D9268
Aa3.78:1 Poor#5D9268 on #01351C

Color blindness preview

CSS variables

/* Water Leaf to Dolphin — https://swatchly.xyz/palette/bce9e2-006156-01351c-5d9268-7ec0d8 */
:root {
  --water-leaf: #bce9e2;
  --philodendron: #006156;
  --pitch-black-forests: #01351c;
  --paying-mantis: #5d9268;
  --dolphin: #7ec0d8;
}

Tailwind CSS v4

/* Water Leaf to Dolphin — https://swatchly.xyz/palette/bce9e2-006156-01351c-5d9268-7ec0d8 */
@theme {
  --color-water-leaf: #bce9e2;
  --color-water-leaf-50: #eafffb;
  --color-water-leaf-100: #def7f3;
  --color-water-leaf-200: #bce9e2;
  --color-water-leaf-300: #abcfc9;
  --color-water-leaf-400: #86afa9;
  --color-water-leaf-500: #69938d;
  --color-water-leaf-600: #4e7771;
  --color-water-leaf-700: #395e59;
  --color-water-leaf-800: #284945;
  --color-water-leaf-900: #1c3935;
  --color-water-leaf-950: #0f2321;
  --color-philodendron: #006156;
  --color-philodendron-50: #d8fff7;
  --color-philodendron-100: #c8f7ed;
  --color-philodendron-200: #ade4da;
  --color-philodendron-300: #8ecfc3;
  --color-philodendron-400: #67b0a3;
  --color-philodendron-500: #479488;
  --color-philodendron-600: #2a786d;
  --color-philodendron-700: #006156;
  --color-philodendron-800: #034c43;
  --color-philodendron-900: #003b33;
  --color-philodendron-950: #002520;
  --color-pitch-black-forests: #01351c;
  --color-pitch-black-forests-50: #e2fdeb;
  --color-pitch-black-forests-100: #d5f4df;
  --color-pitch-black-forests-200: #bde2ca;
  --color-pitch-black-forests-300: #a3cdb1;
  --color-pitch-black-forests-400: #7ead8f;
  --color-pitch-black-forests-500: #609072;
  --color-pitch-black-forests-600: #467357;
  --color-pitch-black-forests-700: #315a41;
  --color-pitch-black-forests-800: #21442f;
  --color-pitch-black-forests-900: #01351c;
  --color-pitch-black-forests-950: #0a1e12;
  --color-paying-mantis: #5d9268;
  --color-paying-mantis-50: #dffee4;
  --color-paying-mantis-100: #d2f5d8;
  --color-paying-mantis-200: #b9e2c0;
  --color-paying-mantis-300: #9ecda6;
  --color-paying-mantis-400: #7aae84;
  --color-paying-mantis-500: #5d9268;
  --color-paying-mantis-600: #44774f;
  --color-paying-mantis-700: #31603c;
  --color-paying-mantis-800: #224c2c;
  --color-paying-mantis-900: #173b20;
  --color-paying-mantis-950: #0b2512;
  --color-dolphin: #7ec0d8;
  --color-dolphin-50: #d8f4ff;
  --color-dolphin-100: #bfebfc;
  --color-dolphin-200: #a3d7ea;
  --color-dolphin-300: #7ec0d8;
  --color-dolphin-400: #62a2b9;
  --color-dolphin-500: #47899f;
  --color-dolphin-600: #2f7085;
  --color-dolphin-700: #1d5a6d;
  --color-dolphin-800: #0f4859;
  --color-dolphin-900: #063947;
  --color-dolphin-950: #02232e;
}