Hatoba Pigeon to Red Rumour Color Palette

About this palette

Hatoba Pigeon to Red Rumour is a 4-color muted palette: #9F819E (Hatoba Pigeon), #170F1B (Shot in the Dark), #D5BEE1 (York Plum), #6E3E47 (Red Rumour). It mixes pink, black, purple, red tones and feels cool overall. The strongest text pairing is #170F1B on #D5BEE1 with a contrast ratio of 10.96:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hatoba Pigeon	rgb(159, 129, 158)	hsl(302, 14%, 56%)
Shot in the Dark	rgb(23, 15, 27)	hsl(280, 29%, 8%)
York Plum	rgb(213, 190, 225)	hsl(279, 37%, 81%)
Red Rumour	rgb(110, 62, 71)	hsl(349, 28%, 34%)

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.

Aa10.96:1 Very good#170F1B on #D5BEE1
Aa10.96:1 Very good#D5BEE1 on #170F1B
Aa5.45:1 Good#9F819E on #170F1B
Aa5.45:1 Good#170F1B on #9F819E
Aa5.03:1 Good#D5BEE1 on #6E3E47
Aa5.03:1 Good#6E3E47 on #D5BEE1

Color blindness preview

CSS variables

/* Hatoba Pigeon to Red Rumour — https://swatchly.xyz/palette/9f819e-170f1b-d5bee1-6e3e47 */
:root {
  --hatoba-pigeon: #9f819e;
  --shot-in-the-dark: #170f1b;
  --york-plum: #d5bee1;
  --red-rumour: #6e3e47;
}

Tailwind CSS v4

/* Hatoba Pigeon to Red Rumour — https://swatchly.xyz/palette/9f819e-170f1b-d5bee1-6e3e47 */
@theme {
  --color-hatoba-pigeon: #9f819e;
  --color-hatoba-pigeon-50: #fff1fe;
  --color-hatoba-pigeon-100: #fae6f9;
  --color-hatoba-pigeon-200: #ead2e9;
  --color-hatoba-pigeon-300: #d6bbd5;
  --color-hatoba-pigeon-400: #b99cb8;
  --color-hatoba-pigeon-500: #9f819e;
  --color-hatoba-pigeon-600: #826681;
  --color-hatoba-pigeon-700: #694f68;
  --color-hatoba-pigeon-800: #533c52;
  --color-hatoba-pigeon-900: #402d40;
  --color-hatoba-pigeon-950: #281b28;
  --color-shot-in-the-dark: #170f1b;
  --color-shot-in-the-dark-50: #f9f2fc;
  --color-shot-in-the-dark-100: #efe8f3;
  --color-shot-in-the-dark-200: #dcd4e1;
  --color-shot-in-the-dark-300: #c6bdcb;
  --color-shot-in-the-dark-400: #a79dad;
  --color-shot-in-the-dark-500: #897f8f;
  --color-shot-in-the-dark-600: #6c6271;
  --color-shot-in-the-dark-700: #534a57;
  --color-shot-in-the-dark-800: #3d3641;
  --color-shot-in-the-dark-900: #2b252d;
  --color-shot-in-the-dark-950: #170f1b;
  --color-york-plum: #d5bee1;
  --color-york-plum-50: #fcf6ff;
  --color-york-plum-100: #f8eaff;
  --color-york-plum-200: #e7d6f0;
  --color-york-plum-300: #d5bee1;
  --color-york-plum-400: #b39ebe;
  --color-york-plum-500: #9781a2;
  --color-york-plum-600: #7a6685;
  --color-york-plum-700: #624f6b;
  --color-york-plum-800: #4c3c55;
  --color-york-plum-900: #3a2d41;
  --color-york-plum-950: #251b2a;
  --color-red-rumour: #6e3e47;
  --color-red-rumour-50: #fff1f3;
  --color-red-rumour-100: #ffe3e7;
  --color-red-rumour-200: #f5c9cf;
  --color-red-rumour-300: #e1afb7;
  --color-red-rumour-400: #c28d96;
  --color-red-rumour-500: #a57079;
  --color-red-rumour-600: #87565e;
  --color-red-rumour-700: #6e3e47;
  --color-red-rumour-800: #553037;
  --color-red-rumour-900: #43242a;
  --color-red-rumour-950: #2b1519;
}