Bath Water to Elite Teal color palette

90EAF2Bath Water EAAC34Tonkatsu AF67BCPrickly Purple 90549EVicious Violet 624300Very Coffee 003439Elite Teal

Open in generator Export PNG, PDF, ASE…

About this palette

Bath Water to Elite Teal is a 6-color cool palette: #90EAF2 (Bath Water), #EAAC34 (Tonkatsu), #AF67BC (Prickly Purple), #90549E (Vicious Violet), #624300 (Very Coffee), #003439 (Elite Teal). It mixes turquoise, yellow, purple, brown tones and feels cool overall. The strongest text pairing is #90EAF2 on #003439 with a contrast ratio of 9.83:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bath Water	rgb(144, 234, 242)	hsl(185, 79%, 76%)
Tonkatsu	rgb(234, 172, 52)	hsl(40, 81%, 56%)
Prickly Purple	rgb(175, 103, 188)	hsl(291, 39%, 57%)
Vicious Violet	rgb(144, 84, 158)	hsl(289, 31%, 47%)
Very Coffee	rgb(98, 67, 0)	hsl(41, 100%, 19%)
Elite Teal	rgb(0, 52, 57)	hsl(185, 100%, 11%)

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.

Aa9.83:1 Very good#90EAF2 on #003439
Aa9.83:1 Very good#003439 on #90EAF2
Aa6.74:1 Good#EAAC34 on #003439
Aa6.74:1 Good#003439 on #EAAC34
Aa6.56:1 Good#90EAF2 on #624300
Aa6.56:1 Good#624300 on #90EAF2
Aa4.50:1 Poor#EAAC34 on #624300
Aa4.50:1 Poor#624300 on #EAAC34

Color blindness preview

CSS variables

/* Bath Water to Elite Teal — https://swatchly.xyz/palette/90eaf2-eaac34-af67bc-90549e-624300-003439 */
:root {
  --bath-water: #90eaf2;
  --tonkatsu: #eaac34;
  --prickly-purple: #af67bc;
  --vicious-violet: #90549e;
  --very-coffee: #624300;
  --elite-teal: #003439;
}

Tailwind CSS v4

/* Bath Water to Elite Teal — https://swatchly.xyz/palette/90eaf2-eaac34-af67bc-90549e-624300-003439 */
@theme {
  --color-bath-water: #90eaf2;
  --color-bath-water-50: #dffcff;
  --color-bath-water-100: #c3f7fc;
  --color-bath-water-200: #90eaf2;
  --color-bath-water-300: #87d0d7;
  --color-bath-water-400: #5cb2b9;
  --color-bath-water-500: #39969e;
  --color-bath-water-600: #157a82;
  --color-bath-water-700: #006268;
  --color-bath-water-800: #004c52;
  --color-bath-water-900: #003b3f;
  --color-bath-water-950: #002528;
  --color-tonkatsu: #eaac34;
  --color-tonkatsu-50: #ffeed4;
  --color-tonkatsu-100: #ffe1b0;
  --color-tonkatsu-200: #f8c876;
  --color-tonkatsu-300: #eaac34;
  --color-tonkatsu-400: #c98e00;
  --color-tonkatsu-500: #a87600;
  --color-tonkatsu-600: #885f00;
  --color-tonkatsu-700: #6d4c00;
  --color-tonkatsu-800: #573b00;
  --color-tonkatsu-900: #452e00;
  --color-tonkatsu-950: #2c1c00;
  --color-prickly-purple: #af67bc;
  --color-prickly-purple-50: #fdf1ff;
  --color-prickly-purple-100: #fbe2ff;
  --color-prickly-purple-200: #f6c4ff;
  --color-prickly-purple-300: #e7a7f2;
  --color-prickly-purple-400: #ca84d7;
  --color-prickly-purple-500: #af67bc;
  --color-prickly-purple-600: #924c9e;
  --color-prickly-purple-700: #773783;
  --color-prickly-purple-800: #5f276a;
  --color-prickly-purple-900: #4b1b54;
  --color-prickly-purple-950: #300e37;
  --color-vicious-violet: #90549e;
  --color-vicious-violet-50: #fcf0ff;
  --color-vicious-violet-100: #fae3ff;
  --color-vicious-violet-200: #f4c6ff;
  --color-vicious-violet-300: #e3acef;
  --color-vicious-violet-400: #c68ad4;
  --color-vicious-violet-500: #ab6eba;
  --color-vicious-violet-600: #90549e;
  --color-vicious-violet-700: #753f82;
  --color-vicious-violet-800: #5e2e69;
  --color-vicious-violet-900: #4a2053;
  --color-vicious-violet-950: #2f1236;
  --color-very-coffee: #624300;
  --color-very-coffee-50: #fff4e2;
  --color-very-coffee-100: #ffe8c5;
  --color-very-coffee-200: #eed3a9;
  --color-very-coffee-300: #dcbd8e;
  --color-very-coffee-400: #c09f69;
  --color-very-coffee-500: #a6844d;
  --color-very-coffee-600: #8b6b33;
  --color-very-coffee-700: #745620;
  --color-very-coffee-800: #624300;
  --color-very-coffee-900: #4b3407;
  --color-very-coffee-950: #312001;
  --color-elite-teal: #003439;
  --color-elite-teal-50: #e1fbfe;
  --color-elite-teal-100: #d4f2f5;
  --color-elite-teal-200: #bcdfe3;
  --color-elite-teal-300: #a1cace;
  --color-elite-teal-400: #7daaaf;
  --color-elite-teal-500: #5f8d92;
  --color-elite-teal-600: #457176;
  --color-elite-teal-700: #30585d;
  --color-elite-teal-800: #214448;
  --color-elite-teal-900: #003439;
  --color-elite-teal-950: #0a1e21;
}