Benevolent Pink to Violet Kiss color palette

E32493Benevolent Pink 936A00Embarrassed Frog FF8556Nectarine 00A5D0Gummy Dolphins 6288FFSkinny Jeans FF9ECFViolet Kiss

Open in generator Export PNG, PDF, ASE…

About this palette

Benevolent Pink to Violet Kiss is a 6-color vibrant, warm, neon palette: #E32493 (Benevolent Pink), #936A00 (Embarrassed Frog), #FF8556 (Nectarine), #00A5D0 (Gummy Dolphins), #6288FF (Skinny Jeans), #FF9ECF (Violet Kiss). It mixes pink, yellow, orange, blue tones and feels warm overall. The strongest text pairing is #936A00 on #FF9ECF with a contrast ratio of 2.57:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Benevolent Pink	rgb(227, 36, 147)	hsl(325, 77%, 52%)
Embarrassed Frog	rgb(147, 106, 0)	hsl(43, 100%, 29%)
Nectarine	rgb(255, 133, 86)	hsl(17, 100%, 67%)
Gummy Dolphins	rgb(0, 165, 208)	hsl(192, 100%, 41%)
Skinny Jeans	rgb(98, 136, 255)	hsl(225, 100%, 69%)
Violet Kiss	rgb(255, 158, 207)	hsl(330, 100%, 81%)

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

/* Benevolent Pink to Violet Kiss — https://swatchly.xyz/palette/e32493-936a00-ff8556-00a5d0-6288ff-ff9ecf */
:root {
  --benevolent-pink: #e32493;
  --embarrassed-frog: #936a00;
  --nectarine: #ff8556;
  --gummy-dolphins: #00a5d0;
  --skinny-jeans: #6288ff;
  --violet-kiss: #ff9ecf;
}

Tailwind CSS v4

/* Benevolent Pink to Violet Kiss — https://swatchly.xyz/palette/e32493-936a00-ff8556-00a5d0-6288ff-ff9ecf */
@theme {
  --color-benevolent-pink: #e32493;
  --color-benevolent-pink-50: #fff0f6;
  --color-benevolent-pink-100: #ffe1ed;
  --color-benevolent-pink-200: #ffc2dc;
  --color-benevolent-pink-300: #ff9cc8;
  --color-benevolent-pink-400: #ff55ae;
  --color-benevolent-pink-500: #e32493;
  --color-benevolent-pink-600: #bd0077;
  --color-benevolent-pink-700: #98005f;
  --color-benevolent-pink-800: #78004a;
  --color-benevolent-pink-900: #5f0039;
  --color-benevolent-pink-950: #3e0024;
  --color-embarrassed-frog: #936a00;
  --color-embarrassed-frog-50: #fff4e0;
  --color-embarrassed-frog-100: #ffeac4;
  --color-embarrassed-frog-200: #f6d59b;
  --color-embarrassed-frog-300: #e4bf7b;
  --color-embarrassed-frog-400: #c89f51;
  --color-embarrassed-frog-500: #ae842e;
  --color-embarrassed-frog-600: #936a00;
  --color-embarrassed-frog-700: #755400;
  --color-embarrassed-frog-800: #5c4100;
  --color-embarrassed-frog-900: #473100;
  --color-embarrassed-frog-950: #2d1e00;
  --color-nectarine: #ff8556;
  --color-nectarine-50: #fff7f4;
  --color-nectarine-100: #ffece6;
  --color-nectarine-200: #ffd4c5;
  --color-nectarine-300: #ffb69b;
  --color-nectarine-400: #ff8556;
  --color-nectarine-500: #dd6738;
  --color-nectarine-600: #bc4914;
  --color-nectarine-700: #993500;
  --color-nectarine-800: #782700;
  --color-nectarine-900: #5c1c00;
  --color-nectarine-950: #3b0f00;
  --color-gummy-dolphins: #00a5d0;
  --color-gummy-dolphins-50: #def5ff;
  --color-gummy-dolphins-100: #c1edff;
  --color-gummy-dolphins-200: #85ddff;
  --color-gummy-dolphins-300: #58c6ed;
  --color-gummy-dolphins-400: #00a5d0;
  --color-gummy-dolphins-500: #008aae;
  --color-gummy-dolphins-600: #006f8d;
  --color-gummy-dolphins-700: #005971;
  --color-gummy-dolphins-800: #00465a;
  --color-gummy-dolphins-900: #003748;
  --color-gummy-dolphins-950: #00232f;
  --color-skinny-jeans: #6288ff;
  --color-skinny-jeans-50: #f4f7ff;
  --color-skinny-jeans-100: #e9efff;
  --color-skinny-jeans-200: #d0ddff;
  --color-skinny-jeans-300: #b2c8ff;
  --color-skinny-jeans-400: #87a7ff;
  --color-skinny-jeans-500: #6288ff;
  --color-skinny-jeans-600: #486add;
  --color-skinny-jeans-700: #3450bb;
  --color-skinny-jeans-800: #243b9a;
  --color-skinny-jeans-900: #192b7c;
  --color-skinny-jeans-950: #0c1852;
  --color-violet-kiss: #ff9ecf;
  --color-violet-kiss-50: #fff1f7;
  --color-violet-kiss-100: #ffe2ef;
  --color-violet-kiss-200: #ffc4e0;
  --color-violet-kiss-300: #ff9ecf;
  --color-violet-kiss-400: #da80ae;
  --color-violet-kiss-500: #be6393;
  --color-violet-kiss-600: #a04978;
  --color-violet-kiss-700: #833560;
  --color-violet-kiss-800: #6a254c;
  --color-violet-kiss-900: #54193b;
  --color-violet-kiss-950: #370d25;
}