Water to Pretty in Prune Color Palette

About this palette

Water to Pretty in Prune is a 5-color warm, vintage palette: #DAF1FF (Water), #5DC2DD (Skydive), #A7902D (Gecko), #955576 (Indian Silk), #622B4E (Pretty in Prune). It mixes white, blue, yellow, red tones and feels warm overall. The strongest text pairing is #DAF1FF on #622B4E with a contrast ratio of 9.12:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water	rgb(218, 241, 255)	hsl(203, 100%, 93%)
Skydive	rgb(93, 194, 221)	hsl(193, 65%, 62%)
Gecko	rgb(167, 144, 45)	hsl(49, 58%, 42%)
Indian Silk	rgb(149, 85, 118)	hsl(329, 27%, 46%)
Pretty in Prune	rgb(98, 43, 78)	hsl(322, 39%, 28%)

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.12:1 Very good#DAF1FF on #622B4E
Aa9.12:1 Very good#622B4E on #DAF1FF
Aa5.18:1 Good#5DC2DD on #622B4E
Aa5.18:1 Good#622B4E on #5DC2DD
Aa4.69:1 Good#DAF1FF on #955576
Aa4.69:1 Good#955576 on #DAF1FF
Aa3.38:1 Poor#A7902D on #622B4E
Aa3.38:1 Poor#622B4E on #A7902D

Color blindness preview

CSS variables

/* Water to Pretty in Prune — https://swatchly.xyz/palette/daf1ff-5dc2dd-a7902d-955576-622b4e */
:root {
  --water: #daf1ff;
  --skydive: #5dc2dd;
  --gecko: #a7902d;
  --indian-silk: #955576;
  --pretty-in-prune: #622b4e;
}

Tailwind CSS v4

/* Water to Pretty in Prune — https://swatchly.xyz/palette/daf1ff-5dc2dd-a7902d-955576-622b4e */
@theme {
  --color-water: #daf1ff;
  --color-water-50: #eef9ff;
  --color-water-100: #daf1ff;
  --color-water-200: #cbdce6;
  --color-water-300: #b3c5d1;
  --color-water-400: #91a6b2;
  --color-water-500: #758a97;
  --color-water-600: #5b6f7b;
  --color-water-700: #465863;
  --color-water-800: #35454e;
  --color-water-900: #28353d;
  --color-water-950: #172126;
  --color-skydive: #5dc2dd;
  --color-skydive-50: #d2f5ff;
  --color-skydive-100: #aeedff;
  --color-skydive-200: #8cd9ef;
  --color-skydive-300: #5dc2dd;
  --color-skydive-400: #3fa4be;
  --color-skydive-500: #168ba5;
  --color-skydive-600: #007188;
  --color-skydive-700: #005b6d;
  --color-skydive-800: #004858;
  --color-skydive-900: #003a46;
  --color-skydive-950: #00242d;
  --color-gecko: #a7902d;
  --color-gecko-50: #fff8da;
  --color-gecko-100: #fdf0bb;
  --color-gecko-200: #eede9e;
  --color-gecko-300: #dbc97e;
  --color-gecko-400: #c0aa53;
  --color-gecko-500: #a7902d;
  --color-gecko-600: #897300;
  --color-gecko-700: #6d5b00;
  --color-gecko-800: #554600;
  --color-gecko-900: #413500;
  --color-gecko-950: #282000;
  --color-indian-silk: #955576;
  --color-indian-silk-50: #fff1f7;
  --color-indian-silk-100: #ffe2ef;
  --color-indian-silk-200: #fcc6e0;
  --color-indian-silk-300: #eaadca;
  --color-indian-silk-400: #cd8bac;
  --color-indian-silk-500: #b26f91;
  --color-indian-silk-600: #955576;
  --color-indian-silk-700: #79405e;
  --color-indian-silk-800: #61304a;
  --color-indian-silk-900: #4d2339;
  --color-indian-silk-950: #321424;
  --color-pretty-in-prune: #622b4e;
  --color-pretty-in-prune-50: #fff0f8;
  --color-pretty-in-prune-100: #ffe1f2;
  --color-pretty-in-prune-200: #f9c6e3;
  --color-pretty-in-prune-300: #e6adce;
  --color-pretty-in-prune-400: #c98baf;
  --color-pretty-in-prune-500: #ad6f94;
  --color-pretty-in-prune-600: #905579;
  --color-pretty-in-prune-700: #754061;
  --color-pretty-in-prune-800: #622b4e;
  --color-pretty-in-prune-900: #4a233b;
  --color-pretty-in-prune-950: #2f1425;
}