Water Nymph to Aqua Obscura Color Palette

About this palette

Water Nymph to Aqua Obscura is a 5-color warm, vintage palette: #86CCD6 (Water Nymph), #CE89A3 (Kiss), #AF4E85 (Our Little Secret), #4F3115 (Moelleux au Chocolat), #006C73 (Aqua Obscura). It mixes turquoise, pink, red, brown tones and feels warm overall. The strongest text pairing is #86CCD6 on #4F3115 with a contrast ratio of 6.52:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water Nymph	rgb(134, 204, 214)	hsl(188, 49%, 68%)
Kiss	rgb(206, 137, 163)	hsl(337, 41%, 67%)
Our Little Secret	rgb(175, 78, 133)	hsl(326, 38%, 50%)
Moelleux au Chocolat	rgb(79, 49, 21)	hsl(29, 58%, 20%)
Aqua Obscura	rgb(0, 108, 115)	hsl(184, 100%, 23%)

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.

Aa6.52:1 Good#86CCD6 on #4F3115
Aa6.52:1 Good#4F3115 on #86CCD6
Aa4.34:1 Poor#CE89A3 on #4F3115
Aa4.34:1 Poor#4F3115 on #CE89A3
Aa3.43:1 Poor#86CCD6 on #006C73
Aa3.43:1 Poor#006C73 on #86CCD6

Color blindness preview

CSS variables

/* Water Nymph to Aqua Obscura — https://swatchly.xyz/palette/86ccd6-ce89a3-af4e85-4f3115-006c73 */
:root {
  --water-nymph: #86ccd6;
  --kiss: #ce89a3;
  --our-little-secret: #af4e85;
  --moelleux-au-chocolat: #4f3115;
  --aqua-obscura: #006c73;
}

Tailwind CSS v4

/* Water Nymph to Aqua Obscura — https://swatchly.xyz/palette/86ccd6-ce89a3-af4e85-4f3115-006c73 */
@theme {
  --color-water-nymph: #86ccd6;
  --color-water-nymph-50: #dcfbff;
  --color-water-nymph-100: #c8f3f9;
  --color-water-nymph-200: #ade0e8;
  --color-water-nymph-300: #86ccd6;
  --color-water-nymph-400: #6aacb5;
  --color-water-nymph-500: #4b919b;
  --color-water-nymph-600: #31767f;
  --color-water-nymph-700: #1c5f67;
  --color-water-nymph-800: #0d4b52;
  --color-water-nymph-900: #033a41;
  --color-water-nymph-950: #002529;
  --color-kiss: #ce89a3;
  --color-kiss-50: #fff0f5;
  --color-kiss-100: #ffe2ec;
  --color-kiss-200: #fcc5d9;
  --color-kiss-300: #e9acc2;
  --color-kiss-400: #ce89a3;
  --color-kiss-500: #b16e88;
  --color-kiss-600: #93556d;
  --color-kiss-700: #794057;
  --color-kiss-800: #613044;
  --color-kiss-900: #4d2334;
  --color-kiss-950: #321420;
  --color-our-little-secret: #af4e85;
  --color-our-little-secret-50: #fff1f7;
  --color-our-little-secret-100: #ffe5f1;
  --color-our-little-secret-200: #ffc9e4;
  --color-our-little-secret-300: #ffa7d5;
  --color-our-little-secret-400: #e584b8;
  --color-our-little-secret-500: #cb689f;
  --color-our-little-secret-600: #af4e85;
  --color-our-little-secret-700: #91376b;
  --color-our-little-secret-800: #752555;
  --color-our-little-secret-900: #5c1841;
  --color-our-little-secret-950: #3d0b29;
  --color-moelleux-au-chocolat: #4f3115;
  --color-moelleux-au-chocolat-50: #fff3e9;
  --color-moelleux-au-chocolat-100: #fee6d3;
  --color-moelleux-au-chocolat-200: #eed2ba;
  --color-moelleux-au-chocolat-300: #dabaa0;
  --color-moelleux-au-chocolat-400: #be9b7e;
  --color-moelleux-au-chocolat-500: #a38163;
  --color-moelleux-au-chocolat-600: #89674b;
  --color-moelleux-au-chocolat-700: #715238;
  --color-moelleux-au-chocolat-800: #5c412a;
  --color-moelleux-au-chocolat-900: #4f3115;
  --color-moelleux-au-chocolat-950: #312010;
  --color-aqua-obscura: #006c73;
  --color-aqua-obscura-50: #dcfcff;
  --color-aqua-obscura-100: #c4f6fa;
  --color-aqua-obscura-200: #abe6eb;
  --color-aqua-obscura-300: #8ed2d8;
  --color-aqua-obscura-400: #67b6bc;
  --color-aqua-obscura-500: #479ca3;
  --color-aqua-obscura-600: #298289;
  --color-aqua-obscura-700: #006c73;
  --color-aqua-obscura-800: #00555a;
  --color-aqua-obscura-900: #004146;
  --color-aqua-obscura-950: #00292d;
}