Walkie Chalkie to Castro Color Palette

About this palette

Walkie Chalkie to Castro is a 5-color vintage, gradient palette: #FFF6F8 (Walkie Chalkie), #E39B8D (Shrimp), #A67CB0 (Heart Potion), #7C4984 (Prunella), #442334 (Castro). It mixes white, red, purple, pink tones and feels balanced overall. The strongest text pairing is #FFF6F8 on #442334 with a contrast ratio of 12.89:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Walkie Chalkie	rgb(255, 246, 248)	hsl(347, 100%, 98%)
Shrimp	rgb(227, 155, 141)	hsl(10, 61%, 72%)
Heart Potion	rgb(166, 124, 176)	hsl(288, 25%, 59%)
Prunella	rgb(124, 73, 132)	hsl(292, 29%, 40%)
Castro	rgb(68, 35, 52)	hsl(329, 32%, 20%)

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.

Aa12.89:1 Super#FFF6F8 on #442334
Aa12.89:1 Super#442334 on #FFF6F8
Aa6.30:1 Good#FFF6F8 on #7C4984
Aa6.30:1 Good#7C4984 on #FFF6F8
Aa6.08:1 Good#E39B8D on #442334
Aa6.08:1 Good#442334 on #E39B8D
Aa3.99:1 Poor#A67CB0 on #442334
Aa3.99:1 Poor#442334 on #A67CB0

Color blindness preview

CSS variables

/* Walkie Chalkie to Castro — https://swatchly.xyz/palette/fff6f8-e39b8d-a67cb0-7c4984-442334 */
:root {
  --walkie-chalkie: #fff6f8;
  --shrimp: #e39b8d;
  --heart-potion: #a67cb0;
  --prunella: #7c4984;
  --castro: #442334;
}

Tailwind CSS v4

/* Walkie Chalkie to Castro — https://swatchly.xyz/palette/fff6f8-e39b8d-a67cb0-7c4984-442334 */
@theme {
  --color-walkie-chalkie: #fff6f8;
  --color-walkie-chalkie-50: #fff6f8;
  --color-walkie-chalkie-100: #f2ecee;
  --color-walkie-chalkie-200: #ded8d9;
  --color-walkie-chalkie-300: #c8c0c2;
  --color-walkie-chalkie-400: #a8a0a2;
  --color-walkie-chalkie-500: #8c8486;
  --color-walkie-chalkie-600: #71696b;
  --color-walkie-chalkie-700: #5a5355;
  --color-walkie-chalkie-800: #464142;
  --color-walkie-chalkie-900: #363132;
  --color-walkie-chalkie-950: #221e1f;
  --color-shrimp: #e39b8d;
  --color-shrimp-50: #fff9f7;
  --color-shrimp-100: #ffefeb;
  --color-shrimp-200: #ffd7cf;
  --color-shrimp-300: #f8bdb1;
  --color-shrimp-400: #e39b8d;
  --color-shrimp-500: #c27d70;
  --color-shrimp-600: #a26054;
  --color-shrimp-700: #85483d;
  --color-shrimp-800: #6a352c;
  --color-shrimp-900: #52261e;
  --color-shrimp-950: #34150f;
  --color-heart-potion: #a67cb0;
  --color-heart-potion-50: #fdf3ff;
  --color-heart-potion-100: #fae6ff;
  --color-heart-potion-200: #efcff7;
  --color-heart-potion-300: #dcb7e5;
  --color-heart-potion-400: #c097ca;
  --color-heart-potion-500: #a67cb0;
  --color-heart-potion-600: #896192;
  --color-heart-potion-700: #6f4a77;
  --color-heart-potion-800: #58375f;
  --color-heart-potion-900: #44294a;
  --color-heart-potion-950: #2b1730;
  --color-prunella: #7c4984;
  --color-prunella-50: #fdf0ff;
  --color-prunella-100: #fbe1ff;
  --color-prunella-200: #f3c9f9;
  --color-prunella-300: #e1b2e8;
  --color-prunella-400: #c692ce;
  --color-prunella-500: #ac77b5;
  --color-prunella-600: #925e9a;
  --color-prunella-700: #7c4984;
  --color-prunella-800: #633769;
  --color-prunella-900: #4d2853;
  --color-prunella-950: #321737;
  --color-castro: #442334;
  --color-castro-50: #fff1f7;
  --color-castro-100: #fee2ef;
  --color-castro-200: #eecddc;
  --color-castro-300: #dab5c6;
  --color-castro-400: #bb94a6;
  --color-castro-500: #9f778a;
  --color-castro-600: #825d6f;
  --color-castro-700: #694757;
  --color-castro-800: #523543;
  --color-castro-900: #442334;
  --color-castro-950: #27171f;
}