Fruit of Passion to Milk Chocolate color palette

956184Fruit of Passion 5B3952Long Passionate Night F5AB75Charming Peach 67BD86Bleached Olive BCDAF3Oh Boy!7A4D20Milk Chocolate

Open in generator Export PNG, PDF, ASE…

About this palette

Fruit of Passion to Milk Chocolate is a 6-color warm, vintage palette: #956184 (Fruit of Passion), #5B3952 (Long Passionate Night), #F5AB75 (Charming Peach), #67BD86 (Bleached Olive), #BCDAF3 (Oh Boy!), #7A4D20 (Milk Chocolate). It mixes pink, purple, orange, green, blue, brown tones and feels warm overall. The strongest text pairing is #5B3952 on #BCDAF3 with a contrast ratio of 6.72:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fruit of Passion	rgb(149, 97, 132)	hsl(320, 21%, 48%)
Long Passionate Night	rgb(91, 57, 82)	hsl(316, 23%, 29%)
Charming Peach	rgb(245, 171, 117)	hsl(25, 86%, 71%)
Bleached Olive	rgb(103, 189, 134)	hsl(142, 39%, 57%)
Oh Boy!	rgb(188, 218, 243)	hsl(207, 70%, 85%)
Milk Chocolate	rgb(122, 77, 32)	hsl(30, 58%, 30%)

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.

Aa6.72:1 Good#5B3952 on #BCDAF3
Aa6.72:1 Good#BCDAF3 on #5B3952
Aa5.10:1 Good#5B3952 on #F5AB75
Aa5.10:1 Good#F5AB75 on #5B3952
Aa4.97:1 Good#BCDAF3 on #7A4D20
Aa4.97:1 Good#7A4D20 on #BCDAF3
Aa4.28:1 Poor#5B3952 on #67BD86
Aa4.28:1 Poor#67BD86 on #5B3952

Color blindness preview

CSS variables

/* Fruit of Passion to Milk Chocolate — https://swatchly.xyz/palette/956184-5b3952-f5ab75-67bd86-bcdaf3-7a4d20 */
:root {
  --fruit-of-passion: #956184;
  --long-passionate-night: #5b3952;
  --charming-peach: #f5ab75;
  --bleached-olive: #67bd86;
  --oh-boy: #bcdaf3;
  --milk-chocolate: #7a4d20;
}

Tailwind CSS v4

/* Fruit of Passion to Milk Chocolate — https://swatchly.xyz/palette/956184-5b3952-f5ab75-67bd86-bcdaf3-7a4d20 */
@theme {
  --color-fruit-of-passion: #956184;
  --color-fruit-of-passion-50: #fff0f9;
  --color-fruit-of-passion-100: #ffe4f5;
  --color-fruit-of-passion-200: #f7cce7;
  --color-fruit-of-passion-300: #e5b5d4;
  --color-fruit-of-passion-400: #ca95b7;
  --color-fruit-of-passion-500: #b07a9e;
  --color-fruit-of-passion-600: #956184;
  --color-fruit-of-passion-700: #794a6a;
  --color-fruit-of-passion-800: #613854;
  --color-fruit-of-passion-900: #4c2941;
  --color-fruit-of-passion-950: #311829;
  --color-long-passionate-night: #5b3952;
  --color-long-passionate-night-50: #fff0fa;
  --color-long-passionate-night-100: #fde2f5;
  --color-long-passionate-night-200: #eccde2;
  --color-long-passionate-night-300: #d8b5ce;
  --color-long-passionate-night-400: #bb95b0;
  --color-long-passionate-night-500: #a17a96;
  --color-long-passionate-night-600: #86617b;
  --color-long-passionate-night-700: #6d4c64;
  --color-long-passionate-night-800: #5b3952;
  --color-long-passionate-night-900: #452c3f;
  --color-long-passionate-night-950: #2d1b28;
  --color-charming-peach: #f5ab75;
  --color-charming-peach-50: #fff0e7;
  --color-charming-peach-100: #ffe3d0;
  --color-charming-peach-200: #ffc8a1;
  --color-charming-peach-300: #f5ab75;
  --color-charming-peach-400: #d28d5a;
  --color-charming-peach-500: #b7713b;
  --color-charming-peach-600: #995821;
  --color-charming-peach-700: #7e430b;
  --color-charming-peach-800: #663200;
  --color-charming-peach-900: #502600;
  --color-charming-peach-950: #341600;
  --color-bleached-olive: #67bd86;
  --color-bleached-olive-50: #e5ffed;
  --color-bleached-olive-100: #cbfdda;
  --color-bleached-olive-200: #b0edc3;
  --color-bleached-olive-300: #93d9aa;
  --color-bleached-olive-400: #67bd86;
  --color-bleached-olive-500: #499f6a;
  --color-bleached-olive-600: #2a8350;
  --color-bleached-olive-700: #10693b;
  --color-bleached-olive-800: #00522b;
  --color-bleached-olive-900: #003f20;
  --color-bleached-olive-950: #002711;
  --color-oh-boy: #bcdaf3;
  --color-oh-boy-50: #eaf6ff;
  --color-oh-boy-100: #daedfc;
  --color-oh-boy-200: #bcdaf3;
  --color-oh-boy-300: #aac3d8;
  --color-oh-boy-400: #89a4bb;
  --color-oh-boy-500: #6d89a0;
  --color-oh-boy-600: #546f84;
  --color-oh-boy-700: #40586c;
  --color-oh-boy-800: #304556;
  --color-oh-boy-900: #233543;
  --color-oh-boy-950: #14212b;
  --color-milk-chocolate: #7a4d20;
  --color-milk-chocolate-50: #fff3e8;
  --color-milk-chocolate-100: #ffe6d1;
  --color-milk-chocolate-200: #f7d0ae;
  --color-milk-chocolate-300: #e5b992;
  --color-milk-chocolate-400: #c8986e;
  --color-milk-chocolate-500: #ad7d51;
  --color-milk-chocolate-600: #916338;
  --color-milk-chocolate-700: #7a4d20;
  --color-milk-chocolate-800: #603b16;
  --color-milk-chocolate-900: #4c2d0c;
  --color-milk-chocolate-950: #311b04;
}