Walkie Chalkie to Her Fierceness color palette

FFF3FAWalkie Chalkie FFA0BDPrism Pink D86D44Bronzed 8D487CPrunella 72133BHer Fierceness

About this palette

Walkie Chalkie to Her Fierceness is a 5-color warm, gradient palette: #FFF3FA (Walkie Chalkie), #FFA0BD (Prism Pink), #D86D44 (Bronzed), #8D487C (Prunella), #72133B (Her Fierceness). It mixes white, pink, orange, red tones and feels warm overall. The strongest text pairing is #FFF3FA on #72133B with a contrast ratio of 10.39:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Walkie Chalkie	rgb(255, 243, 250)	hsl(325, 100%, 98%)
Prism Pink	rgb(255, 160, 189)	hsl(342, 100%, 81%)
Bronzed	rgb(216, 109, 68)	hsl(17, 65%, 56%)
Prunella	rgb(141, 72, 124)	hsl(315, 32%, 42%)
Her Fierceness	rgb(114, 19, 59)	hsl(335, 71%, 26%)

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.39:1 Very good#FFF3FA on #72133B
Aa10.39:1 Very good#72133B on #FFF3FA
Aa5.88:1 Good#FFA0BD on #72133B
Aa5.88:1 Good#72133B on #FFA0BD
Aa5.81:1 Good#FFF3FA on #8D487C
Aa5.81:1 Good#8D487C on #FFF3FA
Aa3.31:1 Poor#D86D44 on #72133B
Aa3.31:1 Poor#72133B on #D86D44

Color blindness preview

CSS variables

/* Walkie Chalkie to Her Fierceness — https://swatchly.xyz/palette/fff3fa-ffa0bd-d86d44-8d487c-72133b */
:root {
  --walkie-chalkie: #fff3fa;
  --prism-pink: #ffa0bd;
  --bronzed: #d86d44;
  --prunella: #8d487c;
  --her-fierceness: #72133b;
}

Tailwind CSS v4

/* Walkie Chalkie to Her Fierceness — https://swatchly.xyz/palette/fff3fa-ffa0bd-d86d44-8d487c-72133b */
@theme {
  --color-walkie-chalkie: #fff3fa;
  --color-walkie-chalkie-50: #fff3fa;
  --color-walkie-chalkie-100: #f1eaee;
  --color-walkie-chalkie-200: #ded6db;
  --color-walkie-chalkie-300: #c8bfc4;
  --color-walkie-chalkie-400: #a99fa5;
  --color-walkie-chalkie-500: #8e8389;
  --color-walkie-chalkie-600: #72686e;
  --color-walkie-chalkie-700: #5b5258;
  --color-walkie-chalkie-800: #484044;
  --color-walkie-chalkie-900: #373135;
  --color-walkie-chalkie-950: #221e20;
  --color-prism-pink: #ffa0bd;
  --color-prism-pink-50: #fff1f4;
  --color-prism-pink-100: #ffe2ea;
  --color-prism-pink-200: #ffc5d5;
  --color-prism-pink-300: #ffa0bd;
  --color-prism-pink-400: #db829e;
  --color-prism-pink-500: #be6683;
  --color-prism-pink-600: #a04c68;
  --color-prism-pink-700: #843752;
  --color-prism-pink-800: #6a2840;
  --color-prism-pink-900: #541c31;
  --color-prism-pink-950: #370e1e;
  --color-bronzed: #d86d44;
  --color-bronzed-50: #fff4f0;
  --color-bronzed-100: #ffeae2;
  --color-bronzed-200: #ffd1c0;
  --color-bronzed-300: #ffb397;
  --color-bronzed-400: #f18a64;
  --color-bronzed-500: #d86d44;
  --color-bronzed-600: #b75026;
  --color-bronzed-700: #98390c;
  --color-bronzed-800: #7a2800;
  --color-bronzed-900: #5e1d00;
  --color-bronzed-950: #3d0f00;
  --color-prunella: #8d487c;
  --color-prunella-50: #fff0fa;
  --color-prunella-100: #ffdff5;
  --color-prunella-200: #fbbfea;
  --color-prunella-300: #e7a4d4;
  --color-prunella-400: #c981b5;
  --color-prunella-500: #ab6399;
  --color-prunella-600: #8d487c;
  --color-prunella-700: #723664;
  --color-prunella-800: #5c284f;
  --color-prunella-900: #491c3e;
  --color-prunella-950: #2f0f28;
  --color-her-fierceness: #72133b;
  --color-her-fierceness-50: #fff1f4;
  --color-her-fierceness-100: #ffe3ea;
  --color-her-fierceness-200: #ffc5d4;
  --color-her-fierceness-300: #fda1bc;
  --color-her-fierceness-400: #e07d9b;
  --color-her-fierceness-500: #c35f7f;
  --color-her-fierceness-600: #a34565;
  --color-her-fierceness-700: #85304e;
  --color-her-fierceness-800: #72133b;
  --color-her-fierceness-900: #54162d;
  --color-her-fierceness-950: #370a1b;
}