Start generating

Peanut to Sugarwinkle color palette

784735Peanut925F57Weathered LeatherAC7879NippleC7919DRosettiE3ABC1Little PrincessFFC6E7Sugarwinkle
Open in generator Export PNG, PDF, ASE…

About this palette

Peanut to Sugarwinkle is a 6-color warm, vintage, gradient palette: #784735 (Peanut), #925F57 (Weathered Leather), #AC7879 (Nipple), #C7919D (Rosetti), #E3ABC1 (Little Princess), #FFC6E7 (Sugarwinkle). It mixes brown, red, pink tones and feels warm overall. The strongest text pairing is #784735 on #FFC6E7 with a contrast ratio of 5.26:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Peanutrgb(120, 71, 53)hsl(16, 39%, 34%)
Weathered Leatherrgb(146, 95, 87)hsl(8, 25%, 46%)
Nipplergb(172, 120, 121)hsl(359, 24%, 57%)
Rosettirgb(199, 145, 157)hsl(347, 33%, 67%)
Little Princessrgb(227, 171, 193)hsl(336, 50%, 78%)
Sugarwinklergb(255, 198, 231)hsl(325, 100%, 89%)

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.

  • Aa5.26:1 Good#784735 on #FFC6E7
  • Aa5.26:1 Good#FFC6E7 on #784735
  • Aa3.95:1 Poor#784735 on #E3ABC1
  • Aa3.95:1 Poor#E3ABC1 on #784735
  • Aa3.62:1 Poor#925F57 on #FFC6E7
  • Aa3.62:1 Poor#FFC6E7 on #925F57

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Peanut to Sugarwinkle — https://swatchly.xyz/palette/784735-925f57-ac7879-c7919d-e3abc1-ffc6e7 */
:root {
  --peanut: #784735;
  --weathered-leather: #925f57;
  --nipple: #ac7879;
  --rosetti: #c7919d;
  --little-princess: #e3abc1;
  --sugarwinkle: #ffc6e7;
}

Tailwind CSS v4

/* Peanut to Sugarwinkle — https://swatchly.xyz/palette/784735-925f57-ac7879-c7919d-e3abc1-ffc6e7 */
@theme {
  --color-peanut: #784735;
  --color-peanut-50: #fff2ed;
  --color-peanut-100: #ffe5db;
  --color-peanut-200: #f8ccbd;
  --color-peanut-300: #e5b4a2;
  --color-peanut-400: #c89380;
  --color-peanut-500: #ad7864;
  --color-peanut-600: #905e4b;
  --color-peanut-700: #784735;
  --color-peanut-800: #5e3728;
  --color-peanut-900: #4a291d;
  --color-peanut-950: #30180f;
  --color-weathered-leather: #925f57;
  --color-weathered-leather-50: #fff2ef;
  --color-weathered-leather-100: #ffe5e0;
  --color-weathered-leather-200: #f8cdc5;
  --color-weathered-leather-300: #e6b5ad;
  --color-weathered-leather-400: #c9948c;
  --color-weathered-leather-500: #ae7970;
  --color-weathered-leather-600: #925f57;
  --color-weathered-leather-700: #774942;
  --color-weathered-leather-800: #5f3832;
  --color-weathered-leather-900: #4b2924;
  --color-weathered-leather-950: #301815;
  --color-nipple: #ac7879;
  --color-nipple-50: #fff2f2;
  --color-nipple-100: #ffe4e4;
  --color-nipple-200: #f7cccd;
  --color-nipple-300: #e4b4b5;
  --color-nipple-400: #c79494;
  --color-nipple-500: #ac7879;
  --color-nipple-600: #8f5e5f;
  --color-nipple-700: #75484a;
  --color-nipple-800: #5d3738;
  --color-nipple-900: #49292a;
  --color-nipple-950: #2f1819;
  --color-rosetti: #c7919d;
  --color-rosetti-50: #fff1f4;
  --color-rosetti-100: #ffe3e9;
  --color-rosetti-200: #f6cbd4;
  --color-rosetti-300: #e3b3bd;
  --color-rosetti-400: #c7919d;
  --color-rosetti-500: #aa7682;
  --color-rosetti-600: #8d5c67;
  --color-rosetti-700: #734751;
  --color-rosetti-800: #5c353f;
  --color-rosetti-900: #482830;
  --color-rosetti-950: #2e171d;
  --color-little-princess: #e3abc1;
  --color-little-princess-50: #ffeef4;
  --color-little-princess-100: #ffdfeb;
  --color-little-princess-200: #f2c7d7;
  --color-little-princess-300: #e3abc1;
  --color-little-princess-400: #c28da2;
  --color-little-princess-500: #a67287;
  --color-little-princess-600: #8a596d;
  --color-little-princess-700: #714557;
  --color-little-princess-800: #5a3444;
  --color-little-princess-900: #482735;
  --color-little-princess-950: #2e1721;
  --color-sugarwinkle: #ffc6e7;
  --color-sugarwinkle-50: #fff3f9;
  --color-sugarwinkle-100: #ffe4f3;
  --color-sugarwinkle-200: #ffc6e7;
  --color-sugarwinkle-300: #e2b2ce;
  --color-sugarwinkle-400: #c491af;
  --color-sugarwinkle-500: #a87593;
  --color-sugarwinkle-600: #8b5a78;
  --color-sugarwinkle-700: #714560;
  --color-sugarwinkle-800: #5a344b;
  --color-sugarwinkle-900: #47263a;
  --color-sugarwinkle-950: #2e1625;
}

Similar palettes