Lucky to Pineapple color palette

AF9D00Lucky 6A4F7DNeon Violet 76C7FFNevermind Nirvana EDCFFFBubblegum Crisis 007BB1Jacuzzi 564400Pineapple

Open in generator Export PNG, PDF, ASE…

About this palette

Lucky to Pineapple is a 6-color cool palette: #AF9D00 (Lucky), #6A4F7D (Neon Violet), #76C7FF (Nevermind Nirvana), #EDCFFF (Bubblegum Crisis), #007BB1 (Jacuzzi), #564400 (Pineapple). It mixes yellow, purple, blue, brown tones and feels cool overall. The strongest text pairing is #EDCFFF on #564400 with a contrast ratio of 6.74:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lucky	rgb(175, 157, 0)	hsl(54, 100%, 34%)
Neon Violet	rgb(106, 79, 125)	hsl(275, 23%, 40%)
Nevermind Nirvana	rgb(118, 199, 255)	hsl(205, 100%, 73%)
Bubblegum Crisis	rgb(237, 207, 255)	hsl(278, 100%, 91%)
Jacuzzi	rgb(0, 123, 177)	hsl(198, 100%, 35%)
Pineapple	rgb(86, 68, 0)	hsl(47, 100%, 17%)

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.74:1 Good#EDCFFF on #564400
Aa6.74:1 Good#564400 on #EDCFFF
Aa5.12:1 Good#76C7FF on #564400
Aa5.12:1 Good#564400 on #76C7FF
Aa4.94:1 Good#6A4F7D on #EDCFFF
Aa4.94:1 Good#EDCFFF on #6A4F7D
Aa3.76:1 Poor#6A4F7D on #76C7FF
Aa3.76:1 Poor#76C7FF on #6A4F7D

Color blindness preview

CSS variables

/* Lucky to Pineapple — https://swatchly.xyz/palette/af9d00-6a4f7d-76c7ff-edcfff-007bb1-564400 */
:root {
  --lucky: #af9d00;
  --neon-violet: #6a4f7d;
  --nevermind-nirvana: #76c7ff;
  --bubblegum-crisis: #edcfff;
  --jacuzzi: #007bb1;
  --pineapple: #564400;
}

Tailwind CSS v4

/* Lucky to Pineapple — https://swatchly.xyz/palette/af9d00-6a4f7d-76c7ff-edcfff-007bb1-564400 */
@theme {
  --color-lucky: #af9d00;
  --color-lucky-50: #fef5b6;
  --color-lucky-100: #f5eba2;
  --color-lucky-200: #e2d67e;
  --color-lucky-300: #cdbe56;
  --color-lucky-400: #af9d00;
  --color-lucky-500: #928300;
  --color-lucky-600: #766900;
  --color-lucky-700: #5e5300;
  --color-lucky-800: #4a4100;
  --color-lucky-900: #393300;
  --color-lucky-950: #242000;
  --color-neon-violet: #6a4f7d;
  --color-neon-violet-50: #f9f2ff;
  --color-neon-violet-100: #f3e4ff;
  --color-neon-violet-200: #e5cff6;
  --color-neon-violet-300: #d1b8e4;
  --color-neon-violet-400: #b498c9;
  --color-neon-violet-500: #9a7eaf;
  --color-neon-violet-600: #806594;
  --color-neon-violet-700: #6a4f7d;
  --color-neon-violet-800: #533d63;
  --color-neon-violet-900: #412e4e;
  --color-neon-violet-950: #291b33;
  --color-nevermind-nirvana: #76c7ff;
  --color-nevermind-nirvana-50: #e9f5ff;
  --color-nevermind-nirvana-100: #d4edff;
  --color-nevermind-nirvana-200: #abdcff;
  --color-nevermind-nirvana-300: #76c7ff;
  --color-nevermind-nirvana-400: #5aa7dc;
  --color-nevermind-nirvana-500: #398cc1;
  --color-nevermind-nirvana-600: #1b71a3;
  --color-nevermind-nirvana-700: #005a87;
  --color-nevermind-nirvana-800: #00476b;
  --color-nevermind-nirvana-900: #003754;
  --color-nevermind-nirvana-950: #002237;
  --color-bubblegum-crisis: #edcfff;
  --color-bubblegum-crisis-50: #fbf6ff;
  --color-bubblegum-crisis-100: #f7e9ff;
  --color-bubblegum-crisis-200: #edcfff;
  --color-bubblegum-crisis-300: #d3bae1;
  --color-bubblegum-crisis-400: #b498c4;
  --color-bubblegum-crisis-500: #987ca8;
  --color-bubblegum-crisis-600: #7c618b;
  --color-bubblegum-crisis-700: #634b71;
  --color-bubblegum-crisis-800: #4e3959;
  --color-bubblegum-crisis-900: #3c2a46;
  --color-bubblegum-crisis-950: #26192d;
  --color-jacuzzi: #007bb1;
  --color-jacuzzi-50: #ecf7ff;
  --color-jacuzzi-100: #daf0ff;
  --color-jacuzzi-200: #b4e1ff;
  --color-jacuzzi-300: #83ceff;
  --color-jacuzzi-400: #57b0e6;
  --color-jacuzzi-500: #3295cd;
  --color-jacuzzi-600: #007bb1;
  --color-jacuzzi-700: #00628e;
  --color-jacuzzi-800: #004c70;
  --color-jacuzzi-900: #003a57;
  --color-jacuzzi-950: #002438;
  --color-pineapple: #564400;
  --color-pineapple-50: #fff5d7;
  --color-pineapple-100: #f7ebc6;
  --color-pineapple-200: #e6d7ab;
  --color-pineapple-300: #d2c18f;
  --color-pineapple-400: #b5a26a;
  --color-pineapple-500: #9a874d;
  --color-pineapple-600: #7f6d34;
  --color-pineapple-700: #685721;
  --color-pineapple-800: #564400;
  --color-pineapple-900: #413408;
  --color-pineapple-950: #2a2002;
}