Walkie Chalkie to Midnight Velvet color palette

FFF3FAWalkie Chalkie AFB1FFWondrous Wisteria A26DC6Viola 4C49B0Galaxy Express 2D2239Midnight Velvet

About this palette

Walkie Chalkie to Midnight Velvet is a 5-color cool, gradient palette: #FFF3FA (Walkie Chalkie), #AFB1FF (Wondrous Wisteria), #A26DC6 (Viola), #4C49B0 (Galaxy Express), #2D2239 (Midnight Velvet). It mixes white, purple tones and feels cool overall. The strongest text pairing is #FFF3FA on #2D2239 with a contrast ratio of 13.90: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%)
Wondrous Wisteria	rgb(175, 177, 255)	hsl(238, 100%, 84%)
Viola	rgb(162, 109, 198)	hsl(276, 44%, 60%)
Galaxy Express	rgb(76, 73, 176)	hsl(242, 41%, 49%)
Midnight Velvet	rgb(45, 34, 57)	hsl(269, 25%, 18%)

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.90:1 Super#FFF3FA on #2D2239
Aa13.90:1 Super#2D2239 on #FFF3FA
Aa7.54:1 Very good#AFB1FF on #2D2239
Aa7.54:1 Very good#2D2239 on #AFB1FF
Aa6.74:1 Good#FFF3FA on #4C49B0
Aa6.74:1 Good#4C49B0 on #FFF3FA
Aa3.96:1 Poor#A26DC6 on #2D2239
Aa3.96:1 Poor#2D2239 on #A26DC6

Color blindness preview

CSS variables

/* Walkie Chalkie to Midnight Velvet — https://swatchly.xyz/palette/fff3fa-afb1ff-a26dc6-4c49b0-2d2239 */
:root {
  --walkie-chalkie: #fff3fa;
  --wondrous-wisteria: #afb1ff;
  --viola: #a26dc6;
  --galaxy-express: #4c49b0;
  --midnight-velvet: #2d2239;
}

Tailwind CSS v4

/* Walkie Chalkie to Midnight Velvet — https://swatchly.xyz/palette/fff3fa-afb1ff-a26dc6-4c49b0-2d2239 */
@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-wondrous-wisteria: #afb1ff;
  --color-wondrous-wisteria-50: #eff0ff;
  --color-wondrous-wisteria-100: #e2e4ff;
  --color-wondrous-wisteria-200: #cacdff;
  --color-wondrous-wisteria-300: #afb1ff;
  --color-wondrous-wisteria-400: #9293dd;
  --color-wondrous-wisteria-500: #7878c2;
  --color-wondrous-wisteria-600: #605fa5;
  --color-wondrous-wisteria-700: #4c4a89;
  --color-wondrous-wisteria-800: #3b3970;
  --color-wondrous-wisteria-900: #2d2c5b;
  --color-wondrous-wisteria-950: #1b1a3c;
  --color-viola: #a26dc6;
  --color-viola-50: #f9f2ff;
  --color-viola-100: #f4e5ff;
  --color-viola-200: #e8cbff;
  --color-viola-300: #daacfb;
  --color-viola-400: #bd8ae1;
  --color-viola-500: #a26dc6;
  --color-viola-600: #8652a8;
  --color-viola-700: #6d3d8b;
  --color-viola-800: #562c71;
  --color-viola-900: #44205a;
  --color-viola-950: #2b113b;
  --color-galaxy-express: #4c49b0;
  --color-galaxy-express-50: #f3f4ff;
  --color-galaxy-express-100: #e7eaff;
  --color-galaxy-express-200: #d0d5ff;
  --color-galaxy-express-300: #b6bdff;
  --color-galaxy-express-400: #9298ff;
  --color-galaxy-express-500: #787be7;
  --color-galaxy-express-600: #6061c9;
  --color-galaxy-express-700: #4c49b0;
  --color-galaxy-express-800: #3b388d;
  --color-galaxy-express-900: #2c2972;
  --color-galaxy-express-950: #1b184d;
  --color-midnight-velvet: #2d2239;
  --color-midnight-velvet-50: #f8f2ff;
  --color-midnight-velvet-100: #efe7fa;
  --color-midnight-velvet-200: #dcd2e9;
  --color-midnight-velvet-300: #c7bbd5;
  --color-midnight-velvet-400: #a89bb7;
  --color-midnight-velvet-500: #8e829e;
  --color-midnight-velvet-600: #756984;
  --color-midnight-velvet-700: #60546d;
  --color-midnight-velvet-800: #4e4459;
  --color-midnight-velvet-900: #3f3649;
  --color-midnight-velvet-950: #2d2239;
}