Bath Water to Blue Burst color palette

86F4F4Bath Water 00261DNightmare 00587EWhale’s Tale 66D1E4Summer of ’82 007D55Opal Green 1397D0Blue Burst

Open in generator Export PNG, PDF, ASE…

About this palette

Bath Water to Blue Burst is a 6-color cool palette: #86F4F4 (Bath Water), #00261D (Nightmare), #00587E (Whale’s Tale), #66D1E4 (Summer of ’82), #007D55 (Opal Green), #1397D0 (Blue Burst). It mixes turquoise, blue, green tones and feels cool overall. The strongest text pairing is #86F4F4 on #00261D with a contrast ratio of 12.56:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bath Water	rgb(134, 244, 244)	hsl(180, 83%, 74%)
Nightmare	rgb(0, 38, 29)	hsl(166, 100%, 7%)
Whale’s Tale	rgb(0, 88, 126)	hsl(198, 100%, 25%)
Summer of ’82	rgb(102, 209, 228)	hsl(189, 70%, 65%)
Opal Green	rgb(0, 125, 85)	hsl(161, 100%, 25%)
Blue Burst	rgb(19, 151, 208)	hsl(198, 83%, 45%)

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.56:1 Super#86F4F4 on #00261D
Aa12.56:1 Super#00261D on #86F4F4
Aa9.12:1 Very good#00261D on #66D1E4
Aa9.12:1 Very good#66D1E4 on #00261D
Aa6.03:1 Good#86F4F4 on #00587E
Aa6.03:1 Good#00587E on #86F4F4
Aa4.92:1 Good#00261D on #1397D0
Aa4.92:1 Good#1397D0 on #00261D

Color blindness preview

CSS variables

/* Bath Water to Blue Burst — https://swatchly.xyz/palette/86f4f4-00261d-00587e-66d1e4-007d55-1397d0 */
:root {
  --bath-water: #86f4f4;
  --nightmare: #00261d;
  --whale-s-tale: #00587e;
  --summer-of-82: #66d1e4;
  --opal-green: #007d55;
  --blue-burst: #1397d0;
}

Tailwind CSS v4

/* Bath Water to Blue Burst — https://swatchly.xyz/palette/86f4f4-00261d-00587e-66d1e4-007d55-1397d0 */
@theme {
  --color-bath-water: #86f4f4;
  --color-bath-water-50: #eaffff;
  --color-bath-water-100: #c4fefe;
  --color-bath-water-200: #86f4f4;
  --color-bath-water-300: #81d8d8;
  --color-bath-water-400: #50b9b9;
  --color-bath-water-500: #1f9c9d;
  --color-bath-water-600: #007e7f;
  --color-bath-water-700: #006364;
  --color-bath-water-800: #004d4d;
  --color-bath-water-900: #003b3c;
  --color-bath-water-950: #002525;
  --color-nightmare: #00261d;
  --color-nightmare-50: #e5fbf3;
  --color-nightmare-100: #d9f2e9;
  --color-nightmare-200: #c2dfd5;
  --color-nightmare-300: #a8cabe;
  --color-nightmare-400: #86ab9f;
  --color-nightmare-500: #6a9083;
  --color-nightmare-600: #507569;
  --color-nightmare-700: #3c5d53;
  --color-nightmare-800: #2c4940;
  --color-nightmare-900: #203831;
  --color-nightmare-950: #00261d;
  --color-whale-s-tale: #00587e;
  --color-whale-s-tale-50: #ebf7ff;
  --color-whale-s-tale-100: #d7efff;
  --color-whale-s-tale-200: #abdfff;
  --color-whale-s-tale-300: #8cc8ed;
  --color-whale-s-tale-400: #65a8d1;
  --color-whale-s-tale-500: #458cb4;
  --color-whale-s-tale-600: #297096;
  --color-whale-s-tale-700: #00587e;
  --color-whale-s-tale-800: #044562;
  --color-whale-s-tale-900: #00354e;
  --color-whale-s-tale-950: #002132;
  --color-summer-of-82: #66d1e4;
  --color-summer-of-82-50: #e0faff;
  --color-summer-of-82-100: #c0f5ff;
  --color-summer-of-82-200: #99e4f2;
  --color-summer-of-82-300: #66d1e4;
  --color-summer-of-82-400: #48b0c2;
  --color-summer-of-82-500: #1a95a7;
  --color-summer-of-82-600: #007989;
  --color-summer-of-82-700: #00606d;
  --color-summer-of-82-800: #004b56;
  --color-summer-of-82-900: #003a43;
  --color-summer-of-82-950: #00242a;
  --color-opal-green: #007d55;
  --color-opal-green-50: #dcffec;
  --color-opal-green-100: #c1fadd;
  --color-opal-green-200: #a3e9c6;
  --color-opal-green-300: #82d4ad;
  --color-opal-green-400: #57b58b;
  --color-opal-green-500: #33996f;
  --color-opal-green-600: #007d55;
  --color-opal-green-700: #006343;
  --color-opal-green-800: #004e33;
  --color-opal-green-900: #003c27;
  --color-opal-green-950: #002617;
  --color-blue-burst: #1397d0;
  --color-blue-burst-50: #edf8ff;
  --color-blue-burst-100: #dbf1ff;
  --color-blue-burst-200: #b3e2ff;
  --color-blue-burst-300: #7ed0ff;
  --color-blue-burst-400: #48b2e9;
  --color-blue-burst-500: #1397d0;
  --color-blue-burst-600: #007aaa;
  --color-blue-burst-700: #006088;
  --color-blue-burst-800: #004b6b;
  --color-blue-burst-900: #003953;
  --color-blue-burst-950: #002335;
}