Sugarwinkle to Maroccan Tea color palette

FFC3E1Sugarwinkle 9DDAB1Big Spender D5CF9EDesert Temple F5D9C3Sablé D8F3BDMaroccan Tea

About this palette

Sugarwinkle to Maroccan Tea is a 5-color pastel, light, warm palette: #FFC3E1 (Sugarwinkle), #9DDAB1 (Big Spender), #D5CF9E (Desert Temple), #F5D9C3 (Sablé), #D8F3BD (Maroccan Tea). It mixes pink, green, yellow, orange tones and feels warm overall. The strongest text pairing is #9DDAB1 on #D8F3BD with a contrast ratio of 1.33:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugarwinkle	rgb(255, 195, 225)	hsl(330, 100%, 88%)
Big Spender	rgb(157, 218, 177)	hsl(140, 45%, 74%)
Desert Temple	rgb(213, 207, 158)	hsl(53, 40%, 73%)
Sablé	rgb(245, 217, 195)	hsl(26, 71%, 86%)
Maroccan Tea	rgb(216, 243, 189)	hsl(90, 69%, 85%)

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

/* Sugarwinkle to Maroccan Tea — https://swatchly.xyz/palette/ffc3e1-9ddab1-d5cf9e-f5d9c3-d8f3bd */
:root {
  --sugarwinkle: #ffc3e1;
  --big-spender: #9ddab1;
  --desert-temple: #d5cf9e;
  --sabl: #f5d9c3;
  --maroccan-tea: #d8f3bd;
}

Tailwind CSS v4

/* Sugarwinkle to Maroccan Tea — https://swatchly.xyz/palette/ffc3e1-9ddab1-d5cf9e-f5d9c3-d8f3bd */
@theme {
  --color-sugarwinkle: #ffc3e1;
  --color-sugarwinkle-50: #fff0f7;
  --color-sugarwinkle-100: #ffe2f0;
  --color-sugarwinkle-200: #ffc3e1;
  --color-sugarwinkle-300: #e2b0c9;
  --color-sugarwinkle-400: #c58faa;
  --color-sugarwinkle-500: #a9738f;
  --color-sugarwinkle-600: #8d5974;
  --color-sugarwinkle-700: #73445d;
  --color-sugarwinkle-800: #5c3349;
  --color-sugarwinkle-900: #482638;
  --color-sugarwinkle-950: #2e1623;
  --color-big-spender: #9ddab1;
  --color-big-spender-50: #edfff2;
  --color-big-spender-100: #d8fbe3;
  --color-big-spender-200: #c0ebcd;
  --color-big-spender-300: #9ddab1;
  --color-big-spender-400: #7fb792;
  --color-big-spender-500: #609b75;
  --color-big-spender-600: #447e5a;
  --color-big-spender-700: #2f6544;
  --color-big-spender-800: #1f4f32;
  --color-big-spender-900: #133c24;
  --color-big-spender-950: #082615;
  --color-desert-temple: #d5cf9e;
  --color-desert-temple-50: #f3efd2;
  --color-desert-temple-100: #e8e4c3;
  --color-desert-temple-200: #d5cf9e;
  --color-desert-temple-300: #bfba8f;
  --color-desert-temple-400: #a29d6f;
  --color-desert-temple-500: #898355;
  --color-desert-temple-600: #706a3e;
  --color-desert-temple-700: #5a552c;
  --color-desert-temple-800: #48431f;
  --color-desert-temple-900: #383415;
  --color-desert-temple-950: #232009;
  --color-sabl: #f5d9c3;
  --color-sabl-50: #fff9f4;
  --color-sabl-100: #feeee1;
  --color-sabl-200: #f5d9c3;
  --color-sabl-300: #d9c2b0;
  --color-sabl-400: #baa18d;
  --color-sabl-500: #9d8470;
  --color-sabl-600: #816955;
  --color-sabl-700: #675140;
  --color-sabl-800: #513e2f;
  --color-sabl-900: #3f2f22;
  --color-sabl-950: #281d13;
  --color-maroccan-tea: #d8f3bd;
  --color-maroccan-tea-50: #e9f9db;
  --color-maroccan-tea-100: #d8f3bd;
  --color-maroccan-tea-200: #c9ddb5;
  --color-maroccan-tea-300: #b1c89b;
  --color-maroccan-tea-400: #91aa79;
  --color-maroccan-tea-500: #778f5d;
  --color-maroccan-tea-600: #5d7444;
  --color-maroccan-tea-700: #495d31;
  --color-maroccan-tea-800: #374923;
  --color-maroccan-tea-900: #293818;
  --color-maroccan-tea-950: #19230c;
}