Start generating

Walkie Chalkie to Serenity’s Reign color palette

FAF4FFWalkie Chalkie3B4587Queen of the Night ShiftC786B0Moonlight Mauve6A5289Ninja PrincessD6B4D6Blushing Sky5D80CBSerenity’s Reign
Open in generator Export PNG, PDF, ASE…

About this palette

Walkie Chalkie to Serenity’s Reign is a 6-color cool palette: #FAF4FF (Walkie Chalkie), #3B4587 (Queen of the Night Shift), #C786B0 (Moonlight Mauve), #6A5289 (Ninja Princess), #D6B4D6 (Blushing Sky), #5D80CB (Serenity’s Reign). It mixes white, blue, pink, purple tones and feels cool overall. The strongest text pairing is #FAF4FF on #3B4587 with a contrast ratio of 8.15:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Walkie Chalkiergb(250, 244, 255)hsl(273, 100%, 98%)
Queen of the Night Shiftrgb(59, 69, 135)hsl(232, 39%, 38%)
Moonlight Mauvergb(199, 134, 176)hsl(321, 37%, 65%)
Ninja Princessrgb(106, 82, 137)hsl(266, 25%, 43%)
Blushing Skyrgb(214, 180, 214)hsl(300, 29%, 77%)
Serenity’s Reignrgb(93, 128, 203)hsl(221, 51%, 58%)

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.

  • Aa8.15:1 Very good#FAF4FF on #3B4587
  • Aa8.15:1 Very good#3B4587 on #FAF4FF
  • Aa6.11:1 Good#FAF4FF on #6A5289
  • Aa6.11:1 Good#6A5289 on #FAF4FF
  • Aa4.76:1 Good#3B4587 on #D6B4D6
  • Aa4.76:1 Good#D6B4D6 on #3B4587
  • Aa3.59:1 Poor#FAF4FF on #5D80CB
  • Aa3.59:1 Poor#5D80CB on #FAF4FF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Walkie Chalkie to Serenity’s Reign — https://swatchly.xyz/palette/faf4ff-3b4587-c786b0-6a5289-d6b4d6-5d80cb */
:root {
  --walkie-chalkie: #faf4ff;
  --queen-of-the-night-shift: #3b4587;
  --moonlight-mauve: #c786b0;
  --ninja-princess: #6a5289;
  --blushing-sky: #d6b4d6;
  --serenity-s-reign: #5d80cb;
}

Tailwind CSS v4

/* Walkie Chalkie to Serenity’s Reign — https://swatchly.xyz/palette/faf4ff-3b4587-c786b0-6a5289-d6b4d6-5d80cb */
@theme {
  --color-walkie-chalkie: #faf4ff;
  --color-walkie-chalkie-50: #faf4ff;
  --color-walkie-chalkie-100: #eeebf1;
  --color-walkie-chalkie-200: #dbd6de;
  --color-walkie-chalkie-300: #c4bfc8;
  --color-walkie-chalkie-400: #a5a0a9;
  --color-walkie-chalkie-500: #89848e;
  --color-walkie-chalkie-600: #6f6973;
  --color-walkie-chalkie-700: #58535b;
  --color-walkie-chalkie-800: #444048;
  --color-walkie-chalkie-900: #353137;
  --color-walkie-chalkie-950: #211e23;
  --color-queen-of-the-night-shift: #3b4587;
  --color-queen-of-the-night-shift-50: #f2f5ff;
  --color-queen-of-the-night-shift-100: #e5eaff;
  --color-queen-of-the-night-shift-200: #c9d4ff;
  --color-queen-of-the-night-shift-300: #aab9fb;
  --color-queen-of-the-night-shift-400: #8897de;
  --color-queen-of-the-night-shift-500: #6c7ac1;
  --color-queen-of-the-night-shift-600: #525ea0;
  --color-queen-of-the-night-shift-700: #3b4587;
  --color-queen-of-the-night-shift-800: #2e3668;
  --color-queen-of-the-night-shift-900: #222953;
  --color-queen-of-the-night-shift-950: #141836;
  --color-moonlight-mauve: #c786b0;
  --color-moonlight-mauve-50: #ffeef8;
  --color-moonlight-mauve-100: #ffdef2;
  --color-moonlight-mauve-200: #f7c3e3;
  --color-moonlight-mauve-300: #e4a9ce;
  --color-moonlight-mauve-400: #c786b0;
  --color-moonlight-mauve-500: #aa6c95;
  --color-moonlight-mauve-600: #8e537a;
  --color-moonlight-mauve-700: #743f62;
  --color-moonlight-mauve-800: #5d2f4e;
  --color-moonlight-mauve-900: #4a223d;
  --color-moonlight-mauve-950: #301427;
  --color-ninja-princess: #6a5289;
  --color-ninja-princess-50: #f7f3ff;
  --color-ninja-princess-100: #f0e6ff;
  --color-ninja-princess-200: #e2d0fe;
  --color-ninja-princess-300: #cfb9ed;
  --color-ninja-princess-400: #b29ad3;
  --color-ninja-princess-500: #9980ba;
  --color-ninja-princess-600: #7f67a0;
  --color-ninja-princess-700: #6a5289;
  --color-ninja-princess-800: #533f6e;
  --color-ninja-princess-900: #412f57;
  --color-ninja-princess-950: #291c39;
  --color-blushing-sky: #d6b4d6;
  --color-blushing-sky-50: #ffefff;
  --color-blushing-sky-100: #f9e3f9;
  --color-blushing-sky-200: #e8cee7;
  --color-blushing-sky-300: #d6b4d6;
  --color-blushing-sky-400: #b595b5;
  --color-blushing-sky-500: #9a7a9a;
  --color-blushing-sky-600: #7e607e;
  --color-blushing-sky-700: #664a66;
  --color-blushing-sky-800: #513951;
  --color-blushing-sky-900: #3f2b3f;
  --color-blushing-sky-950: #281928;
  --color-serenity-s-reign: #5d80cb;
  --color-serenity-s-reign-50: #eff5ff;
  --color-serenity-s-reign-100: #e0eaff;
  --color-serenity-s-reign-200: #c1d6ff;
  --color-serenity-s-reign-300: #9ebeff;
  --color-serenity-s-reign-400: #799de7;
  --color-serenity-s-reign-500: #5d80cb;
  --color-serenity-s-reign-600: #4566ad;
  --color-serenity-s-reign-700: #335090;
  --color-serenity-s-reign-800: #253d76;
  --color-serenity-s-reign-900: #1a2f5e;
  --color-serenity-s-reign-950: #0e1d3f;
}

Similar palettes