Icy Plains to Murasaki Color Palette

About this palette

Icy Plains to Murasaki is a 5-color cool palette: #CDD6FF (Icy Plains), #A3B87D (Around the Gills), #9091C3 (Easter Egg), #566849 (Monstera), #52284A (Murasaki). It mixes purple, green tones and feels cool overall. The strongest text pairing is #CDD6FF on #52284A with a contrast ratio of 8.32:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(205, 214, 255)	hsl(229, 100%, 90%)
Around the Gills	rgb(163, 184, 125)	hsl(81, 29%, 61%)
Easter Egg	rgb(144, 145, 195)	hsl(239, 30%, 66%)
Monstera	rgb(86, 104, 73)	hsl(95, 18%, 35%)
Murasaki	rgb(82, 40, 74)	hsl(311, 34%, 24%)

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.32:1 Very good#CDD6FF on #52284A
Aa8.32:1 Very good#52284A on #CDD6FF
Aa5.51:1 Good#A3B87D on #52284A
Aa5.51:1 Good#52284A on #A3B87D
Aa4.22:1 Poor#CDD6FF on #566849
Aa4.22:1 Poor#566849 on #CDD6FF
Aa3.99:1 Poor#9091C3 on #52284A
Aa3.99:1 Poor#52284A on #9091C3

Color blindness preview

CSS variables

/* Icy Plains to Murasaki — https://swatchly.xyz/palette/cdd6ff-a3b87d-9091c3-566849-52284a */
:root {
  --icy-plains: #cdd6ff;
  --around-the-gills: #a3b87d;
  --easter-egg: #9091c3;
  --monstera: #566849;
  --murasaki: #52284a;
}

Tailwind CSS v4

/* Icy Plains to Murasaki — https://swatchly.xyz/palette/cdd6ff-a3b87d-9091c3-566849-52284a */
@theme {
  --color-icy-plains: #cdd6ff;
  --color-icy-plains-50: #f3f5ff;
  --color-icy-plains-100: #e6ebff;
  --color-icy-plains-200: #cdd6ff;
  --color-icy-plains-300: #b8c0e2;
  --color-icy-plains-400: #98a0c5;
  --color-icy-plains-500: #7c84aa;
  --color-icy-plains-600: #626a8d;
  --color-icy-plains-700: #4d5373;
  --color-icy-plains-800: #3b405c;
  --color-icy-plains-900: #2d3149;
  --color-icy-plains-950: #1b1e2f;
  --color-around-the-gills: #a3b87d;
  --color-around-the-gills-50: #f4ffe2;
  --color-around-the-gills-100: #ebf8d6;
  --color-around-the-gills-200: #d8e8be;
  --color-around-the-gills-300: #c2d4a4;
  --color-around-the-gills-400: #a3b87d;
  --color-around-the-gills-500: #869a61;
  --color-around-the-gills-600: #697c44;
  --color-around-the-gills-700: #52632e;
  --color-around-the-gills-800: #3e4c1e;
  --color-around-the-gills-900: #2e3a12;
  --color-around-the-gills-950: #1a2307;
  --color-easter-egg: #9091c3;
  --color-easter-egg-50: #eff0ff;
  --color-easter-egg-100: #e1e3ff;
  --color-easter-egg-200: #caccf5;
  --color-easter-egg-300: #b1b3e1;
  --color-easter-egg-400: #9091c3;
  --color-easter-egg-500: #7778a8;
  --color-easter-egg-600: #5f608d;
  --color-easter-egg-700: #4b4b74;
  --color-easter-egg-800: #3b3b5e;
  --color-easter-egg-900: #2e2d4c;
  --color-easter-egg-950: #1d1c33;
  --color-monstera: #566849;
  --color-monstera-50: #eefae6;
  --color-monstera-100: #e1eed8;
  --color-monstera-200: #cadabf;
  --color-monstera-300: #b0c2a4;
  --color-monstera-400: #8ea181;
  --color-monstera-500: #718464;
  --color-monstera-600: #566849;
  --color-monstera-700: #435338;
  --color-monstera-800: #34412a;
  --color-monstera-900: #27321f;
  --color-monstera-950: #171f11;
  --color-murasaki: #52284a;
  --color-murasaki-50: #fff0fb;
  --color-murasaki-100: #ffe1f7;
  --color-murasaki-200: #f1cae7;
  --color-murasaki-300: #ddb1d3;
  --color-murasaki-400: #c191b6;
  --color-murasaki-500: #a7779c;
  --color-murasaki-600: #8c5e82;
  --color-murasaki-700: #744a6b;
  --color-murasaki-800: #5f3957;
  --color-murasaki-900: #52284a;
  --color-murasaki-950: #331b2e;
}