Walkie Chalkie to Foggy Love color palette

FFF5FFWalkie Chalkie 332935Melanzane 8699B2Monsoon Season 576789Admiral Blue 484669Starlit Night CBC8EFFoggy Love

Open in generator Export PNG, PDF, ASE…

About this palette

Walkie Chalkie to Foggy Love is a 6-color muted, cool palette: #FFF5FF (Walkie Chalkie), #332935 (Melanzane), #8699B2 (Monsoon Season), #576789 (Admiral Blue), #484669 (Starlit Night), #CBC8EF (Foggy Love). It mixes white, gray, blue, purple tones and feels cool overall. The strongest text pairing is #FFF5FF on #332935 with a contrast ratio of 13.09:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Walkie Chalkie	rgb(255, 245, 255)	hsl(300, 100%, 98%)
Melanzane	rgb(51, 41, 53)	hsl(290, 13%, 18%)
Monsoon Season	rgb(134, 153, 178)	hsl(214, 22%, 61%)
Admiral Blue	rgb(87, 103, 137)	hsl(221, 22%, 44%)
Starlit Night	rgb(72, 70, 105)	hsl(243, 20%, 34%)
Foggy Love	rgb(203, 200, 239)	hsl(245, 55%, 86%)

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.

Aa13.09:1 Super#FFF5FF on #332935
Aa13.09:1 Super#332935 on #FFF5FF
Aa8.64:1 Very good#332935 on #CBC8EF
Aa8.64:1 Very good#CBC8EF on #332935
Aa8.39:1 Very good#FFF5FF on #484669
Aa8.39:1 Very good#484669 on #FFF5FF
Aa5.54:1 Good#484669 on #CBC8EF
Aa5.54:1 Good#CBC8EF on #484669

Color blindness preview

CSS variables

/* Walkie Chalkie to Foggy Love — https://swatchly.xyz/palette/fff5ff-332935-8699b2-576789-484669-cbc8ef */
:root {
  --walkie-chalkie: #fff5ff;
  --melanzane: #332935;
  --monsoon-season: #8699b2;
  --admiral-blue: #576789;
  --starlit-night: #484669;
  --foggy-love: #cbc8ef;
}

Tailwind CSS v4

/* Walkie Chalkie to Foggy Love — https://swatchly.xyz/palette/fff5ff-332935-8699b2-576789-484669-cbc8ef */
@theme {
  --color-walkie-chalkie: #fff5ff;
  --color-walkie-chalkie-50: #fff5ff;
  --color-walkie-chalkie-100: #f2ecf2;
  --color-walkie-chalkie-200: #ded7de;
  --color-walkie-chalkie-300: #c8c0c8;
  --color-walkie-chalkie-400: #a89fa8;
  --color-walkie-chalkie-500: #8c838c;
  --color-walkie-chalkie-600: #716971;
  --color-walkie-chalkie-700: #5a525a;
  --color-walkie-chalkie-800: #464046;
  --color-walkie-chalkie-900: #363136;
  --color-walkie-chalkie-950: #221e22;
  --color-melanzane: #332935;
  --color-melanzane-50: #faf2fb;
  --color-melanzane-100: #f0e8f2;
  --color-melanzane-200: #ddd4df;
  --color-melanzane-300: #c8bdca;
  --color-melanzane-400: #a89caa;
  --color-melanzane-500: #8b7f8d;
  --color-melanzane-600: #6f6471;
  --color-melanzane-700: #574d59;
  --color-melanzane-800: #423a44;
  --color-melanzane-900: #332935;
  --color-melanzane-950: #1e191f;
  --color-monsoon-season: #8699b2;
  --color-monsoon-season-50: #e9f2ff;
  --color-monsoon-season-100: #dae7f9;
  --color-monsoon-season-200: #c2d2e7;
  --color-monsoon-season-300: #a8bad1;
  --color-monsoon-season-400: #8699b2;
  --color-monsoon-season-500: #6d8098;
  --color-monsoon-season-600: #56677d;
  --color-monsoon-season-700: #425266;
  --color-monsoon-season-800: #334052;
  --color-monsoon-season-900: #273241;
  --color-monsoon-season-950: #17202b;
  --color-admiral-blue: #576789;
  --color-admiral-blue-50: #f0f5ff;
  --color-admiral-blue-100: #e1ebff;
  --color-admiral-blue-200: #c8d6f3;
  --color-admiral-blue-300: #afbfdf;
  --color-admiral-blue-400: #8d9ec2;
  --color-admiral-blue-500: #7182a6;
  --color-admiral-blue-600: #576789;
  --color-admiral-blue-700: #43516f;
  --color-admiral-blue-800: #333f59;
  --color-admiral-blue-900: #263046;
  --color-admiral-blue-950: #161e2d;
  --color-starlit-night: #484669;
  --color-starlit-night-50: #f4f4ff;
  --color-starlit-night-100: #e9e9ff;
  --color-starlit-night-200: #d4d4f3;
  --color-starlit-night-300: #bfbfe2;
  --color-starlit-night-400: #a1a0c6;
  --color-starlit-night-500: #8786ad;
  --color-starlit-night-600: #6f6d92;
  --color-starlit-night-700: #5a587b;
  --color-starlit-night-800: #484669;
  --color-starlit-night-900: #373650;
  --color-starlit-night-950: #232235;
  --color-foggy-love: #cbc8ef;
  --color-foggy-love-50: #edecff;
  --color-foggy-love-100: #e1dffa;
  --color-foggy-love-200: #cbc8ef;
  --color-foggy-love-300: #b7b4d6;
  --color-foggy-love-400: #9996ba;
  --color-foggy-love-500: #807da0;
  --color-foggy-love-600: #676486;
  --color-foggy-love-700: #524f6e;
  --color-foggy-love-800: #413f59;
  --color-foggy-love-900: #323046;
  --color-foggy-love-950: #1f1d2d;
}