Bath Water to Fake Love Color Palette

About this palette

Bath Water to Fake Love is a 5-color cool palette: #87E7F2 (Bath Water), #006F70 (Pine Scented Lagoon), #462D00 (Secret Passage), #B17500 (Falafel), #CD83ED (Fake Love). It mixes turquoise, brown, orange, purple tones and feels cool overall. The strongest text pairing is #87E7F2 on #462D00 with a contrast ratio of 9.01:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bath Water	rgb(135, 231, 242)	hsl(186, 80%, 74%)
Pine Scented Lagoon	rgb(0, 111, 112)	hsl(181, 100%, 22%)
Secret Passage	rgb(70, 45, 0)	hsl(39, 100%, 14%)
Falafel	rgb(177, 117, 0)	hsl(40, 100%, 35%)
Fake Love	rgb(205, 131, 237)	hsl(282, 75%, 72%)

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.01:1 Very good#87E7F2 on #462D00
Aa9.01:1 Very good#462D00 on #87E7F2
Aa4.93:1 Good#462D00 on #CD83ED
Aa4.93:1 Good#CD83ED on #462D00
Aa4.20:1 Poor#87E7F2 on #006F70
Aa4.20:1 Poor#006F70 on #87E7F2
Aa3.31:1 Poor#462D00 on #B17500
Aa3.31:1 Poor#B17500 on #462D00

Color blindness preview

CSS variables

/* Bath Water to Fake Love — https://swatchly.xyz/palette/87e7f2-006f70-462d00-b17500-cd83ed */
:root {
  --bath-water: #87e7f2;
  --pine-scented-lagoon: #006f70;
  --secret-passage: #462d00;
  --falafel: #b17500;
  --fake-love: #cd83ed;
}

Tailwind CSS v4

/* Bath Water to Fake Love — https://swatchly.xyz/palette/87e7f2-006f70-462d00-b17500-cd83ed */
@theme {
  --color-bath-water: #87e7f2;
  --color-bath-water-50: #d9fbff;
  --color-bath-water-100: #bcf5fc;
  --color-bath-water-200: #87e7f2;
  --color-bath-water-300: #7eced7;
  --color-bath-water-400: #53b0ba;
  --color-bath-water-500: #2e959f;
  --color-bath-water-600: #007a84;
  --color-bath-water-700: #006169;
  --color-bath-water-800: #004c53;
  --color-bath-water-900: #003b40;
  --color-bath-water-950: #002529;
  --color-pine-scented-lagoon: #006f70;
  --color-pine-scented-lagoon-50: #d4ffff;
  --color-pine-scented-lagoon-100: #c1f5f4;
  --color-pine-scented-lagoon-200: #a2e1e1;
  --color-pine-scented-lagoon-300: #80caca;
  --color-pine-scented-lagoon-400: #55a9aa;
  --color-pine-scented-lagoon-500: #328c8d;
  --color-pine-scented-lagoon-600: #006f70;
  --color-pine-scented-lagoon-700: #005859;
  --color-pine-scented-lagoon-800: #004546;
  --color-pine-scented-lagoon-900: #003636;
  --color-pine-scented-lagoon-950: #002222;
  --color-secret-passage: #462d00;
  --color-secret-passage-50: #fff3e3;
  --color-secret-passage-100: #fce8cd;
  --color-secret-passage-200: #ebd4b4;
  --color-secret-passage-300: #d7bc98;
  --color-secret-passage-400: #b99c74;
  --color-secret-passage-500: #9e8158;
  --color-secret-passage-600: #82663f;
  --color-secret-passage-700: #69502c;
  --color-secret-passage-800: #543e1d;
  --color-secret-passage-900: #462d00;
  --color-secret-passage-950: #2a1c08;
  --color-falafel: #b17500;
  --color-falafel-50: #fff3e3;
  --color-falafel-100: #ffe6c6;
  --color-falafel-200: #fdcd8d;
  --color-falafel-300: #eab469;
  --color-falafel-400: #cd9239;
  --color-falafel-500: #b17500;
  --color-falafel-600: #8f5e00;
  --color-falafel-700: #724a00;
  --color-falafel-800: #5a3900;
  --color-falafel-900: #462c00;
  --color-falafel-950: #2d1a00;
  --color-fake-love: #cd83ed;
  --color-fake-love-50: #fbf4ff;
  --color-fake-love-100: #f7e7ff;
  --color-fake-love-200: #efccff;
  --color-fake-love-300: #e5abff;
  --color-fake-love-400: #cd83ed;
  --color-fake-love-500: #af66ce;
  --color-fake-love-600: #924baf;
  --color-fake-love-700: #773591;
  --color-fake-love-800: #5f2476;
  --color-fake-love-900: #4a175d;
  --color-fake-love-950: #2f0b3d;
}