Shadow Purple to Icy Plains Color Palette

About this palette

Shadow Purple to Icy Plains is a 5-color warm, vintage palette: #563549 (Shadow Purple), #5C592E (Reptile Revenge), #138E6F (Elf), #ACB170 (Estragon), #D0D5FB (Icy Plains). It mixes red, brown, turquoise, green, purple tones and feels warm overall. The strongest text pairing is #563549 on #D0D5FB with a contrast ratio of 7.29:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shadow Purple	rgb(86, 53, 73)	hsl(324, 24%, 27%)
Reptile Revenge	rgb(92, 89, 46)	hsl(56, 33%, 27%)
Elf	rgb(19, 142, 111)	hsl(165, 76%, 32%)
Estragon	rgb(172, 177, 112)	hsl(65, 29%, 57%)
Icy Plains	rgb(208, 213, 251)	hsl(233, 84%, 90%)

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.

Aa7.29:1 Very good#563549 on #D0D5FB
Aa7.29:1 Very good#D0D5FB on #563549
Aa4.99:1 Good#5C592E on #D0D5FB
Aa4.99:1 Good#D0D5FB on #5C592E
Aa4.64:1 Good#563549 on #ACB170
Aa4.64:1 Good#ACB170 on #563549
Aa3.17:1 Poor#5C592E on #ACB170
Aa3.17:1 Poor#ACB170 on #5C592E

Color blindness preview

CSS variables

/* Shadow Purple to Icy Plains — https://swatchly.xyz/palette/563549-5c592e-138e6f-acb170-d0d5fb */
:root {
  --shadow-purple: #563549;
  --reptile-revenge: #5c592e;
  --elf: #138e6f;
  --estragon: #acb170;
  --icy-plains: #d0d5fb;
}

Tailwind CSS v4

/* Shadow Purple to Icy Plains — https://swatchly.xyz/palette/563549-5c592e-138e6f-acb170-d0d5fb */
@theme {
  --color-shadow-purple: #563549;
  --color-shadow-purple-50: #fff0f8;
  --color-shadow-purple-100: #fde3f1;
  --color-shadow-purple-200: #eccddf;
  --color-shadow-purple-300: #d8b5c9;
  --color-shadow-purple-400: #ba94aa;
  --color-shadow-purple-500: #9e788e;
  --color-shadow-purple-600: #825e73;
  --color-shadow-purple-700: #69495c;
  --color-shadow-purple-800: #563549;
  --color-shadow-purple-900: #412937;
  --color-shadow-purple-950: #291922;
  --color-reptile-revenge: #5c592e;
  --color-reptile-revenge-50: #f8f7dd;
  --color-reptile-revenge-100: #eeedd0;
  --color-reptile-revenge-200: #dcdab7;
  --color-reptile-revenge-300: #c6c49d;
  --color-reptile-revenge-400: #a8a57a;
  --color-reptile-revenge-500: #8d8a5d;
  --color-reptile-revenge-600: #727045;
  --color-reptile-revenge-700: #5c592e;
  --color-reptile-revenge-800: #484522;
  --color-reptile-revenge-900: #373517;
  --color-reptile-revenge-950: #22210b;
  --color-elf: #138e6f;
  --color-elf-50: #d1ffed;
  --color-elf-100: #b7f7df;
  --color-elf-200: #96e3c8;
  --color-elf-300: #72ccae;
  --color-elf-400: #43ac8c;
  --color-elf-500: #138e6f;
  --color-elf-600: #007359;
  --color-elf-700: #005c46;
  --color-elf-800: #004837;
  --color-elf-900: #00392a;
  --color-elf-950: #00241a;
  --color-estragon: #acb170;
  --color-estragon-50: #f9fcda;
  --color-estragon-100: #f0f4ce;
  --color-estragon-200: #dfe3b5;
  --color-estragon-300: #cace99;
  --color-estragon-400: #acb170;
  --color-estragon-500: #8f9354;
  --color-estragon-600: #737738;
  --color-estragon-700: #5b5e22;
  --color-estragon-800: #464913;
  --color-estragon-900: #353708;
  --color-estragon-950: #202102;
  --color-icy-plains: #d0d5fb;
  --color-icy-plains-50: #f3f5ff;
  --color-icy-plains-100: #e7eaff;
  --color-icy-plains-200: #d0d5fb;
  --color-icy-plains-300: #bbbfdf;
  --color-icy-plains-400: #9b9fc2;
  --color-icy-plains-500: #7f83a6;
  --color-icy-plains-600: #65698a;
  --color-icy-plains-700: #4f5370;
  --color-icy-plains-800: #3d405a;
  --color-icy-plains-900: #2e3147;
  --color-icy-plains-950: #1c1e2d;
}