Hatoba Pigeon to Tropical Rain Color Palette

About this palette

Hatoba Pigeon to Tropical Rain is a 5-color muted, cool palette: #988BA6 (Hatoba Pigeon), #CAEBE8 (Spa), #57442C (Peat Brown), #BBAED2 (Pastel Lilac), #437674 (Tropical Rain). It mixes purple, gray, brown, turquoise tones and feels cool overall. The strongest text pairing is #CAEBE8 on #57442C with a contrast ratio of 7.30:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hatoba Pigeon	rgb(152, 139, 166)	hsl(269, 13%, 60%)
Spa	rgb(202, 235, 232)	hsl(175, 45%, 86%)
Peat Brown	rgb(87, 68, 44)	hsl(33, 33%, 26%)
Pastel Lilac	rgb(187, 174, 210)	hsl(262, 29%, 75%)
Tropical Rain	rgb(67, 118, 116)	hsl(178, 28%, 36%)

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.

Aa7.30:1 Very good#CAEBE8 on #57442C
Aa7.30:1 Very good#57442C on #CAEBE8
Aa4.45:1 Poor#57442C on #BBAED2
Aa4.45:1 Poor#BBAED2 on #57442C
Aa4.06:1 Poor#CAEBE8 on #437674
Aa4.06:1 Poor#437674 on #CAEBE8

Color blindness preview

CSS variables

/* Hatoba Pigeon to Tropical Rain — https://swatchly.xyz/palette/988ba6-caebe8-57442c-bbaed2-437674 */
:root {
  --hatoba-pigeon: #988ba6;
  --spa: #caebe8;
  --peat-brown: #57442c;
  --pastel-lilac: #bbaed2;
  --tropical-rain: #437674;
}

Tailwind CSS v4

/* Hatoba Pigeon to Tropical Rain — https://swatchly.xyz/palette/988ba6-caebe8-57442c-bbaed2-437674 */
@theme {
  --color-hatoba-pigeon: #988ba6;
  --color-hatoba-pigeon-50: #faf5ff;
  --color-hatoba-pigeon-100: #f4ebfd;
  --color-hatoba-pigeon-200: #e3d9ed;
  --color-hatoba-pigeon-300: #cfc3db;
  --color-hatoba-pigeon-400: #b2a5bf;
  --color-hatoba-pigeon-500: #988ba6;
  --color-hatoba-pigeon-600: #7b6f88;
  --color-hatoba-pigeon-700: #62566e;
  --color-hatoba-pigeon-800: #4c4257;
  --color-hatoba-pigeon-900: #3a3243;
  --color-hatoba-pigeon-950: #241e2a;
  --color-spa: #caebe8;
  --color-spa-50: #e0f3f1;
  --color-spa-100: #caebe8;
  --color-spa-200: #bed7d5;
  --color-spa-300: #a6c2c0;
  --color-spa-400: #87a5a2;
  --color-spa-500: #6c8b88;
  --color-spa-600: #54716f;
  --color-spa-700: #415b59;
  --color-spa-800: #304846;
  --color-spa-900: #233736;
  --color-spa-950: #142221;
  --color-peat-brown: #57442c;
  --color-peat-brown-50: #fff3e5;
  --color-peat-brown-100: #f7e9d7;
  --color-peat-brown-200: #e6d5c0;
  --color-peat-brown-300: #d2bfa7;
  --color-peat-brown-400: #b5a086;
  --color-peat-brown-500: #9a856b;
  --color-peat-brown-600: #806c53;
  --color-peat-brown-700: #69563f;
  --color-peat-brown-800: #57442c;
  --color-peat-brown-900: #423423;
  --color-peat-brown-950: #2b2014;
  --color-pastel-lilac: #bbaed2;
  --color-pastel-lilac-50: #f2ebff;
  --color-pastel-lilac-100: #e7def7;
  --color-pastel-lilac-200: #d2c8e5;
  --color-pastel-lilac-300: #bbaed2;
  --color-pastel-lilac-400: #9e91b3;
  --color-pastel-lilac-500: #84789a;
  --color-pastel-lilac-600: #6c6080;
  --color-pastel-lilac-700: #574c68;
  --color-pastel-lilac-800: #453b54;
  --color-pastel-lilac-900: #362e44;
  --color-pastel-lilac-950: #221c2b;
  --color-tropical-rain: #437674;
  --color-tropical-rain-50: #dffcfa;
  --color-tropical-rain-100: #d2f3f1;
  --color-tropical-rain-200: #bae1de;
  --color-tropical-rain-300: #9ecbc9;
  --color-tropical-rain-400: #7bacaa;
  --color-tropical-rain-500: #5e918f;
  --color-tropical-rain-600: #437674;
  --color-tropical-rain-700: #305e5d;
  --color-tropical-rain-800: #214a49;
  --color-tropical-rain-900: #163938;
  --color-tropical-rain-950: #0a2423;
}