Saffron Desires to Purple Illusion Color Palette

About this palette

Saffron Desires to Purple Illusion is a 4-color vibrant palette: #C73853 (Saffron Desires), #00AD6F (Secret Garden), #FF6680 (Kisses and Hugs), #AEB7FF (Purple Illusion). It mixes red, green, purple tones and feels balanced overall. The strongest text pairing is #C73853 on #AEB7FF with a contrast ratio of 2.67:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Saffron Desires	rgb(199, 56, 83)	hsl(349, 56%, 50%)
Secret Garden	rgb(0, 173, 111)	hsl(158, 100%, 34%)
Kisses and Hugs	rgb(255, 102, 128)	hsl(350, 100%, 70%)
Purple Illusion	rgb(174, 183, 255)	hsl(233, 100%, 84%)

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.

Color blindness preview

CSS variables

/* Saffron Desires to Purple Illusion — https://swatchly.xyz/palette/c73853-00ad6f-ff6680-aeb7ff */
:root {
  --saffron-desires: #c73853;
  --secret-garden: #00ad6f;
  --kisses-and-hugs: #ff6680;
  --purple-illusion: #aeb7ff;
}

Tailwind CSS v4

/* Saffron Desires to Purple Illusion — https://swatchly.xyz/palette/c73853-00ad6f-ff6680-aeb7ff */
@theme {
  --color-saffron-desires: #c73853;
  --color-saffron-desires-50: #fff1f2;
  --color-saffron-desires-100: #ffe6e7;
  --color-saffron-desires-200: #ffcccf;
  --color-saffron-desires-300: #ffacb2;
  --color-saffron-desires-400: #ff7587;
  --color-saffron-desires-500: #e5556b;
  --color-saffron-desires-600: #c73853;
  --color-saffron-desires-700: #a61e3d;
  --color-saffron-desires-800: #87072c;
  --color-saffron-desires-900: #6b0020;
  --color-saffron-desires-950: #460012;
  --color-secret-garden: #00ad6f;
  --color-secret-garden-50: #e5ffef;
  --color-secret-garden-100: #c7ffde;
  --color-secret-garden-200: #9ef4c4;
  --color-secret-garden-300: #7ce2ac;
  --color-secret-garden-400: #49c68b;
  --color-secret-garden-500: #00ad6f;
  --color-secret-garden-600: #008b59;
  --color-secret-garden-700: #006f45;
  --color-secret-garden-800: #005635;
  --color-secret-garden-900: #004227;
  --color-secret-garden-950: #002916;
  --color-kisses-and-hugs: #ff6680;
  --color-kisses-and-hugs-50: #fff1f2;
  --color-kisses-and-hugs-100: #ffe3e5;
  --color-kisses-and-hugs-200: #ffc7cb;
  --color-kisses-and-hugs-300: #ffa3ad;
  --color-kisses-and-hugs-400: #ff6680;
  --color-kisses-and-hugs-500: #de4866;
  --color-kisses-and-hugs-600: #bd294d;
  --color-kisses-and-hugs-700: #9e0d39;
  --color-kisses-and-hugs-800: #7f002a;
  --color-kisses-and-hugs-900: #640020;
  --color-kisses-and-hugs-950: #420012;
  --color-purple-illusion: #aeb7ff;
  --color-purple-illusion-50: #f0f2ff;
  --color-purple-illusion-100: #e3e7ff;
  --color-purple-illusion-200: #cad1ff;
  --color-purple-illusion-300: #aeb7ff;
  --color-purple-illusion-400: #9098dc;
  --color-purple-illusion-500: #767dc1;
  --color-purple-illusion-600: #5d63a3;
  --color-purple-illusion-700: #494e88;
  --color-purple-illusion-800: #383c6e;
  --color-purple-illusion-900: #2b2d59;
  --color-purple-illusion-950: #191b3a;
}