Italian Grape to Hatoba Pigeon color palette

403F4FItalian Grape 6C6588Heron CBC8E0Dust of the Moon F3F1FFCloud Break 928CACHatoba Pigeon

About this palette

Italian Grape to Hatoba Pigeon is a 5-color muted palette: #403F4F (Italian Grape), #6C6588 (Heron), #CBC8E0 (Dust of the Moon), #F3F1FF (Cloud Break), #928CAC (Hatoba Pigeon). It mixes gray, purple, white tones and feels cool overall. The strongest text pairing is #403F4F on #F3F1FF with a contrast ratio of 9.23:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Italian Grape	rgb(64, 63, 79)	hsl(244, 11%, 28%)
Heron	rgb(108, 101, 136)	hsl(252, 15%, 46%)
Dust of the Moon	rgb(203, 200, 224)	hsl(248, 28%, 83%)
Cloud Break	rgb(243, 241, 255)	hsl(249, 100%, 97%)
Hatoba Pigeon	rgb(146, 140, 172)	hsl(251, 16%, 61%)

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.23:1 Very good#403F4F on #F3F1FF
Aa9.23:1 Very good#F3F1FF on #403F4F
Aa6.31:1 Good#403F4F on #CBC8E0
Aa6.31:1 Good#CBC8E0 on #403F4F
Aa4.89:1 Good#6C6588 on #F3F1FF
Aa4.89:1 Good#F3F1FF on #6C6588
Aa3.34:1 Poor#6C6588 on #CBC8E0
Aa3.34:1 Poor#CBC8E0 on #6C6588

Color blindness preview

CSS variables

/* Italian Grape to Hatoba Pigeon — https://swatchly.xyz/palette/403f4f-6c6588-cbc8e0-f3f1ff-928cac */
:root {
  --italian-grape: #403f4f;
  --heron: #6c6588;
  --dust-of-the-moon: #cbc8e0;
  --cloud-break: #f3f1ff;
  --hatoba-pigeon: #928cac;
}

Tailwind CSS v4

/* Italian Grape to Hatoba Pigeon — https://swatchly.xyz/palette/403f4f-6c6588-cbc8e0-f3f1ff-928cac */
@theme {
  --color-italian-grape: #403f4f;
  --color-italian-grape-50: #f4f4ff;
  --color-italian-grape-100: #eaeaf6;
  --color-italian-grape-200: #d6d6e4;
  --color-italian-grape-300: #bfbfcf;
  --color-italian-grape-400: #a09fb1;
  --color-italian-grape-500: #848395;
  --color-italian-grape-600: #6a697a;
  --color-italian-grape-700: #535262;
  --color-italian-grape-800: #403f4f;
  --color-italian-grape-900: #31303c;
  --color-italian-grape-950: #1e1d25;
  --color-heron: #6c6588;
  --color-heron-50: #f5f3ff;
  --color-heron-100: #ebe7ff;
  --color-heron-200: #d8d3f0;
  --color-heron-300: #c1bbdd;
  --color-heron-400: #a29bbf;
  --color-heron-500: #867fa4;
  --color-heron-600: #6c6588;
  --color-heron-700: #564f6e;
  --color-heron-800: #433d58;
  --color-heron-900: #332e45;
  --color-heron-950: #201c2c;
  --color-dust-of-the-moon: #cbc8e0;
  --color-dust-of-the-moon-50: #fafaff;
  --color-dust-of-the-moon-100: #f2f0ff;
  --color-dust-of-the-moon-200: #e0deef;
  --color-dust-of-the-moon-300: #cbc8e0;
  --color-dust-of-the-moon-400: #aaa7bd;
  --color-dust-of-the-moon-500: #8c89a0;
  --color-dust-of-the-moon-600: #706d83;
  --color-dust-of-the-moon-700: #585569;
  --color-dust-of-the-moon-800: #444152;
  --color-dust-of-the-moon-900: #33313f;
  --color-dust-of-the-moon-950: #1f1e28;
  --color-cloud-break: #f3f1ff;
  --color-cloud-break-50: #f3f1ff;
  --color-cloud-break-100: #e9e8f1;
  --color-cloud-break-200: #d6d5df;
  --color-cloud-break-300: #c0beca;
  --color-cloud-break-400: #a19fab;
  --color-cloud-break-500: #868490;
  --color-cloud-break-600: #6c6a76;
  --color-cloud-break-700: #55545e;
  --color-cloud-break-800: #42414a;
  --color-cloud-break-900: #333239;
  --color-cloud-break-950: #1f1e24;
  --color-hatoba-pigeon: #928cac;
  --color-hatoba-pigeon-50: #f7f6ff;
  --color-hatoba-pigeon-100: #f0ecff;
  --color-hatoba-pigeon-200: #dedaf2;
  --color-hatoba-pigeon-300: #c9c4e0;
  --color-hatoba-pigeon-400: #aca6c5;
  --color-hatoba-pigeon-500: #928cac;
  --color-hatoba-pigeon-600: #75708e;
  --color-hatoba-pigeon-700: #5d5773;
  --color-hatoba-pigeon-800: #48435c;
  --color-hatoba-pigeon-900: #373247;
  --color-hatoba-pigeon-950: #211e2d;
}