Chocolate Fantasies to Violet Kiss color palette

5B371CChocolate Fantasies 7B2C6BViolet Vixen 3D7FCASoothing Sapphire 7AAA87Green Goddess F79BD8Violet Kiss

Open in generator Export PNG, PDF, ASE…

About this palette

Chocolate Fantasies to Violet Kiss is a 5-color warm palette: #5B371C (Chocolate Fantasies), #7B2C6B (Violet Vixen), #3D7FCA (Soothing Sapphire), #7AAA87 (Green Goddess), #F79BD8 (Violet Kiss). It mixes brown, purple, blue, green, pink tones and feels warm overall. The strongest text pairing is #5B371C on #F79BD8 with a contrast ratio of 5.30:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chocolate Fantasies	rgb(91, 55, 28)	hsl(26, 53%, 23%)
Violet Vixen	rgb(123, 44, 107)	hsl(312, 47%, 33%)
Soothing Sapphire	rgb(61, 127, 202)	hsl(212, 57%, 52%)
Green Goddess	rgb(122, 170, 135)	hsl(136, 22%, 57%)
Violet Kiss	rgb(247, 155, 216)	hsl(320, 85%, 79%)

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.30:1 Good#5B371C on #F79BD8
Aa5.30:1 Good#F79BD8 on #5B371C
Aa4.40:1 Poor#7B2C6B on #F79BD8
Aa4.40:1 Poor#F79BD8 on #7B2C6B
Aa3.95:1 Poor#5B371C on #7AAA87
Aa3.95:1 Poor#7AAA87 on #5B371C
Aa3.28:1 Poor#7B2C6B on #7AAA87
Aa3.28:1 Poor#7AAA87 on #7B2C6B

Color blindness preview

CSS variables

/* Chocolate Fantasies to Violet Kiss — https://swatchly.xyz/palette/5b371c-7b2c6b-3d7fca-7aaa87-f79bd8 */
:root {
  --chocolate-fantasies: #5b371c;
  --violet-vixen: #7b2c6b;
  --soothing-sapphire: #3d7fca;
  --green-goddess: #7aaa87;
  --violet-kiss: #f79bd8;
}

Tailwind CSS v4

/* Chocolate Fantasies to Violet Kiss — https://swatchly.xyz/palette/5b371c-7b2c6b-3d7fca-7aaa87-f79bd8 */
@theme {
  --color-chocolate-fantasies: #5b371c;
  --color-chocolate-fantasies-50: #fff2ea;
  --color-chocolate-fantasies-100: #ffe6d5;
  --color-chocolate-fantasies-200: #f1d0ba;
  --color-chocolate-fantasies-300: #deb89e;
  --color-chocolate-fantasies-400: #c0977b;
  --color-chocolate-fantasies-500: #a47b5f;
  --color-chocolate-fantasies-600: #886146;
  --color-chocolate-fantasies-700: #6e4b32;
  --color-chocolate-fantasies-800: #5b371c;
  --color-chocolate-fantasies-900: #442b19;
  --color-chocolate-fantasies-950: #2c1a0c;
  --color-violet-vixen: #7b2c6b;
  --color-violet-vixen-50: #fff0fa;
  --color-violet-vixen-100: #ffe1f6;
  --color-violet-vixen-200: #ffbfee;
  --color-violet-vixen-300: #efa2db;
  --color-violet-vixen-400: #d17ebd;
  --color-violet-vixen-500: #b360a0;
  --color-violet-vixen-600: #944683;
  --color-violet-vixen-700: #7b2c6b;
  --color-violet-vixen-800: #602253;
  --color-violet-vixen-900: #4c1841;
  --color-violet-vixen-950: #310c2a;
  --color-soothing-sapphire: #3d7fca;
  --color-soothing-sapphire-50: #ecf4ff;
  --color-soothing-sapphire-100: #d8eaff;
  --color-soothing-sapphire-200: #b4d6ff;
  --color-soothing-sapphire-300: #88beff;
  --color-soothing-sapphire-400: #5c9de8;
  --color-soothing-sapphire-500: #3d7fca;
  --color-soothing-sapphire-600: #2565ac;
  --color-soothing-sapphire-700: #13508f;
  --color-soothing-sapphire-800: #053e76;
  --color-soothing-sapphire-900: #00305f;
  --color-soothing-sapphire-950: #001e40;
  --color-green-goddess: #7aaa87;
  --color-green-goddess-50: #e0fce6;
  --color-green-goddess-100: #d2f2da;
  --color-green-goddess-200: #badfc3;
  --color-green-goddess-300: #9ec9a9;
  --color-green-goddess-400: #7aaa87;
  --color-green-goddess-500: #608f6d;
  --color-green-goddess-600: #487555;
  --color-green-goddess-700: #345e41;
  --color-green-goddess-800: #264a31;
  --color-green-goddess-900: #1b3a25;
  --color-green-goddess-950: #0e2515;
  --color-violet-kiss: #f79bd8;
  --color-violet-kiss-50: #ffeef8;
  --color-violet-kiss-100: #ffdef2;
  --color-violet-kiss-200: #ffbee8;
  --color-violet-kiss-300: #f79bd8;
  --color-violet-kiss-400: #d47eb7;
  --color-violet-kiss-500: #b8629c;
  --color-violet-kiss-600: #9a4881;
  --color-violet-kiss-700: #7f3469;
  --color-violet-kiss-800: #672554;
  --color-violet-kiss-900: #521a42;
  --color-violet-kiss-950: #350d2a;
}