Heron to Foundation White color palette

6E637FHeron C1B3D1Vintage Bloom 8C829FHatoba Pigeon 423D4BItalian Grape F1ECFFFoundation White

About this palette

Heron to Foundation White is a 5-color muted, cool palette: #6E637F (Heron), #C1B3D1 (Vintage Bloom), #8C829F (Hatoba Pigeon), #423D4B (Italian Grape), #F1ECFF (Foundation White). It mixes purple, gray, white tones and feels cool overall. The strongest text pairing is #423D4B on #F1ECFF with a contrast ratio of 9.09:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Heron	rgb(110, 99, 127)	hsl(264, 12%, 44%)
Vintage Bloom	rgb(193, 179, 209)	hsl(268, 25%, 76%)
Hatoba Pigeon	rgb(140, 130, 159)	hsl(261, 13%, 57%)
Italian Grape	rgb(66, 61, 75)	hsl(261, 10%, 27%)
Foundation White	rgb(241, 236, 255)	hsl(256, 100%, 96%)

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.09:1 Very good#423D4B on #F1ECFF
Aa9.09:1 Very good#F1ECFF on #423D4B
Aa5.32:1 Good#C1B3D1 on #423D4B
Aa5.32:1 Good#423D4B on #C1B3D1
Aa4.84:1 Good#6E637F on #F1ECFF
Aa4.84:1 Good#F1ECFF on #6E637F
Aa3.13:1 Poor#8C829F on #F1ECFF
Aa3.13:1 Poor#F1ECFF on #8C829F

Color blindness preview

CSS variables

/* Heron to Foundation White — https://swatchly.xyz/palette/6e637f-c1b3d1-8c829f-423d4b-f1ecff */
:root {
  --heron: #6e637f;
  --vintage-bloom: #c1b3d1;
  --hatoba-pigeon: #8c829f;
  --italian-grape: #423d4b;
  --foundation-white: #f1ecff;
}

Tailwind CSS v4

/* Heron to Foundation White — https://swatchly.xyz/palette/6e637f-c1b3d1-8c829f-423d4b-f1ecff */
@theme {
  --color-heron: #6e637f;
  --color-heron-50: #f7f3ff;
  --color-heron-100: #eee7fb;
  --color-heron-200: #dbd2e9;
  --color-heron-300: #c4bad5;
  --color-heron-400: #a599b7;
  --color-heron-500: #897e9b;
  --color-heron-600: #6e637f;
  --color-heron-700: #574e66;
  --color-heron-800: #443c51;
  --color-heron-900: #352e40;
  --color-heron-950: #211c29;
  --color-vintage-bloom: #c1b3d1;
  --color-vintage-bloom-50: #f6eeff;
  --color-vintage-bloom-100: #ebe2f6;
  --color-vintage-bloom-200: #d7cce4;
  --color-vintage-bloom-300: #c1b3d1;
  --color-vintage-bloom-400: #a395b2;
  --color-vintage-bloom-500: #887b97;
  --color-vintage-bloom-600: #6f627d;
  --color-vintage-bloom-700: #594e65;
  --color-vintage-bloom-800: #463c51;
  --color-vintage-bloom-900: #372f40;
  --color-vintage-bloom-950: #221c29;
  --color-hatoba-pigeon: #8c829f;
  --color-hatoba-pigeon-50: #f7f3ff;
  --color-hatoba-pigeon-100: #eee8fc;
  --color-hatoba-pigeon-200: #dcd4eb;
  --color-hatoba-pigeon-300: #c6bdd7;
  --color-hatoba-pigeon-400: #a79dba;
  --color-hatoba-pigeon-500: #8c829f;
  --color-hatoba-pigeon-600: #716883;
  --color-hatoba-pigeon-700: #5a516a;
  --color-hatoba-pigeon-800: #463f54;
  --color-hatoba-pigeon-900: #362f42;
  --color-hatoba-pigeon-950: #211d2a;
  --color-italian-grape: #423d4b;
  --color-italian-grape-50: #f6f3fd;
  --color-italian-grape-100: #ede9f4;
  --color-italian-grape-200: #d9d5e2;
  --color-italian-grape-300: #c3bdcc;
  --color-italian-grape-400: #a39dad;
  --color-italian-grape-500: #878291;
  --color-italian-grape-600: #6c6776;
  --color-italian-grape-700: #55505e;
  --color-italian-grape-800: #423d4b;
  --color-italian-grape-900: #322f39;
  --color-italian-grape-950: #1f1c23;
  --color-foundation-white: #f1ecff;
  --color-foundation-white-50: #f9f7ff;
  --color-foundation-white-100: #f1ecff;
  --color-foundation-white-200: #dcd8e6;
  --color-foundation-white-300: #c5c1d0;
  --color-foundation-white-400: #a5a0b1;
  --color-foundation-white-500: #898495;
  --color-foundation-white-600: #6e697a;
  --color-foundation-white-700: #575361;
  --color-foundation-white-800: #44404d;
  --color-foundation-white-900: #34313c;
  --color-foundation-white-950: #201e25;
}