Sugarwinkle to Ludicrous Lemming color palette

About this palette

Sugarwinkle to Ludicrous Lemming is a 4-color warm, vintage palette: #FAC9E2 (Sugarwinkle), #5E2B32 (Jazz), #8E577E (Plum Highness), #BD8D78 (Ludicrous Lemming). It mixes pink, brown, orange tones and feels warm overall. The strongest text pairing is #FAC9E2 on #5E2B32 with a contrast ratio of 7.77:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Sugarwinklergb(250, 201, 226)hsl(329, 83%, 88%)
Jazzrgb(94, 43, 50)hsl(352, 37%, 27%)
Plum Highnessrgb(142, 87, 126)hsl(317, 24%, 45%)
Ludicrous Lemmingrgb(189, 141, 120)hsl(18, 34%, 61%)

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.77:1 Very good#FAC9E2 on #5E2B32
  • Aa7.77:1 Very good#5E2B32 on #FAC9E2
  • Aa3.88:1 Poor#5E2B32 on #BD8D78
  • Aa3.88:1 Poor#BD8D78 on #5E2B32
  • Aa3.81:1 Poor#FAC9E2 on #8E577E
  • Aa3.81:1 Poor#8E577E on #FAC9E2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Sugarwinkle to Ludicrous Lemming — https://swatchly.xyz/palette/fac9e2-5e2b32-8e577e-bd8d78 */
:root {
  --sugarwinkle: #fac9e2;
  --jazz: #5e2b32;
  --plum-highness: #8e577e;
  --ludicrous-lemming: #bd8d78;
}

Tailwind CSS v4

/* Sugarwinkle to Ludicrous Lemming — https://swatchly.xyz/palette/fac9e2-5e2b32-8e577e-bd8d78 */
@theme {
  --color-sugarwinkle: #fac9e2;
  --color-sugarwinkle-50: #fff2f8;
  --color-sugarwinkle-100: #ffe4f1;
  --color-sugarwinkle-200: #fac9e2;
  --color-sugarwinkle-300: #deb5ca;
  --color-sugarwinkle-400: #c094ab;
  --color-sugarwinkle-500: #a4788f;
  --color-sugarwinkle-600: #885e74;
  --color-sugarwinkle-700: #6e485c;
  --color-sugarwinkle-800: #573648;
  --color-sugarwinkle-900: #442938;
  --color-sugarwinkle-950: #2c1823;
  --color-jazz: #5e2b32;
  --color-jazz-50: #fff1f2;
  --color-jazz-100: #ffe3e5;
  --color-jazz-200: #fac9cd;
  --color-jazz-300: #e6b0b4;
  --color-jazz-400: #c88d93;
  --color-jazz-500: #ab7176;
  --color-jazz-600: #8d565c;
  --color-jazz-700: #714146;
  --color-jazz-800: #5e2b32;
  --color-jazz-900: #462327;
  --color-jazz-950: #2c1417;
  --color-plum-highness: #8e577e;
  --color-plum-highness-50: #fff0fa;
  --color-plum-highness-100: #ffe1f5;
  --color-plum-highness-200: #f6c7e7;
  --color-plum-highness-300: #e3aed2;
  --color-plum-highness-400: #c68db4;
  --color-plum-highness-500: #aa7199;
  --color-plum-highness-600: #8e577e;
  --color-plum-highness-700: #734265;
  --color-plum-highness-800: #5c3250;
  --color-plum-highness-900: #49243f;
  --color-plum-highness-950: #2f1528;
  --color-ludicrous-lemming: #bd8d78;
  --color-ludicrous-lemming-50: #ffeee7;
  --color-ludicrous-lemming-100: #ffdfd2;
  --color-ludicrous-lemming-200: #f0c8b7;
  --color-ludicrous-lemming-300: #dbaf9c;
  --color-ludicrous-lemming-400: #bd8d78;
  --color-ludicrous-lemming-500: #a2735f;
  --color-ludicrous-lemming-600: #865b48;
  --color-ludicrous-lemming-700: #6e4736;
  --color-ludicrous-lemming-800: #583627;
  --color-ludicrous-lemming-900: #46291d;
  --color-ludicrous-lemming-950: #2e1910;
}

Similar palettes