Jealous Jellyfish to Diva Color Palette

About this palette

Jealous Jellyfish to Diva is a 5-color vibrant, warm, neon palette: #B70096 (Jealous Jellyfish), #DE3F9C (Kirby), #B48500 (Arrowwood), #FF80B8 (Dream Setting), #D894FF (Diva). It mixes pink, yellow, purple tones and feels warm overall. The strongest text pairing is #B70096 on #D894FF with a contrast ratio of 2.78:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jealous Jellyfish	rgb(183, 0, 150)	hsl(311, 100%, 36%)
Kirby	rgb(222, 63, 156)	hsl(325, 71%, 56%)
Arrowwood	rgb(180, 133, 0)	hsl(44, 100%, 35%)
Dream Setting	rgb(255, 128, 184)	hsl(334, 100%, 75%)
Diva	rgb(216, 148, 255)	hsl(278, 100%, 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.

Color blindness preview

CSS variables

/* Jealous Jellyfish to Diva — https://swatchly.xyz/palette/b70096-de3f9c-b48500-ff80b8-d894ff */
:root {
  --jealous-jellyfish: #b70096;
  --kirby: #de3f9c;
  --arrowwood: #b48500;
  --dream-setting: #ff80b8;
  --diva: #d894ff;
}

Tailwind CSS v4

/* Jealous Jellyfish to Diva — https://swatchly.xyz/palette/b70096-de3f9c-b48500-ff80b8-d894ff */
@theme {
  --color-jealous-jellyfish: #b70096;
  --color-jealous-jellyfish-50: #fff0fa;
  --color-jealous-jellyfish-100: #ffe1f4;
  --color-jealous-jellyfish-200: #ffc1eb;
  --color-jealous-jellyfish-300: #ff98e1;
  --color-jealous-jellyfish-400: #f45cce;
  --color-jealous-jellyfish-500: #d736b2;
  --color-jealous-jellyfish-600: #b70096;
  --color-jealous-jellyfish-700: #930078;
  --color-jealous-jellyfish-800: #74005e;
  --color-jealous-jellyfish-900: #5b0049;
  --color-jealous-jellyfish-950: #3b002f;
  --color-kirby: #de3f9c;
  --color-kirby-50: #fff1f7;
  --color-kirby-100: #ffe3f0;
  --color-kirby-200: #ffc5e0;
  --color-kirby-300: #ffa0cf;
  --color-kirby-400: #fb63b7;
  --color-kirby-500: #de3f9c;
  --color-kirby-600: #bd1a80;
  --color-kirby-700: #9b0067;
  --color-kirby-800: #7a0050;
  --color-kirby-900: #60003e;
  --color-kirby-950: #3f0027;
  --color-arrowwood: #b48500;
  --color-arrowwood-50: #fff5e3;
  --color-arrowwood-100: #ffecc7;
  --color-arrowwood-200: #fad792;
  --color-arrowwood-300: #e9c06f;
  --color-arrowwood-400: #cea03f;
  --color-arrowwood-500: #b48500;
  --color-arrowwood-600: #916b00;
  --color-arrowwood-700: #735400;
  --color-arrowwood-800: #5a4100;
  --color-arrowwood-900: #453100;
  --color-arrowwood-950: #2c1e00;
  --color-dream-setting: #ff80b8;
  --color-dream-setting-50: #fff9fb;
  --color-dream-setting-100: #ffeef4;
  --color-dream-setting-200: #ffd5e4;
  --color-dream-setting-300: #ffb5d2;
  --color-dream-setting-400: #ff80b8;
  --color-dream-setting-500: #dc6299;
  --color-dream-setting-600: #ba427c;
  --color-dream-setting-700: #9a2a62;
  --color-dream-setting-800: #7c174c;
  --color-dream-setting-900: #610a39;
  --color-dream-setting-950: #3e0222;
  --color-diva: #d894ff;
  --color-diva-50: #f6e9ff;
  --color-diva-100: #f0d9ff;
  --color-diva-200: #e5baff;
  --color-diva-300: #d894ff;
  --color-diva-400: #b978de;
  --color-diva-500: #9f5dc3;
  --color-diva-600: #8545a6;
  --color-diva-700: #6d328b;
  --color-diva-800: #582473;
  --color-diva-900: #47195e;
  --color-diva-950: #2e0c3e;
}