Pineapple to Fizzy Peach Color Palette

About this palette

Pineapple to Fizzy Peach is a 5-color cool, earthy, vintage palette: #5A4010 (Pineapple), #67750F (Topiary Green), #7BB875 (Soon to Be Hay), #2B3000 (Wasabi Nori), #F8BC64 (Fizzy Peach). It mixes brown, green, yellow tones and feels cool overall. The strongest text pairing is #2B3000 on #F8BC64 with a contrast ratio of 8.11:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pineapple	rgb(90, 64, 16)	hsl(39, 70%, 21%)
Topiary Green	rgb(103, 117, 15)	hsl(68, 77%, 26%)
Soon to Be Hay	rgb(123, 184, 117)	hsl(115, 32%, 59%)
Wasabi Nori	rgb(43, 48, 0)	hsl(66, 100%, 9%)
Fizzy Peach	rgb(248, 188, 100)	hsl(36, 91%, 68%)

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.

Aa8.11:1 Very good#2B3000 on #F8BC64
Aa8.11:1 Very good#F8BC64 on #2B3000
Aa5.87:1 Good#7BB875 on #2B3000
Aa5.87:1 Good#2B3000 on #7BB875
Aa5.69:1 Good#5A4010 on #F8BC64
Aa5.69:1 Good#F8BC64 on #5A4010
Aa4.12:1 Poor#5A4010 on #7BB875
Aa4.12:1 Poor#7BB875 on #5A4010

Color blindness preview

CSS variables

/* Pineapple to Fizzy Peach — https://swatchly.xyz/palette/5a4010-67750f-7bb875-2b3000-f8bc64 */
:root {
  --pineapple: #5a4010;
  --topiary-green: #67750f;
  --soon-to-be-hay: #7bb875;
  --wasabi-nori: #2b3000;
  --fizzy-peach: #f8bc64;
}

Tailwind CSS v4

/* Pineapple to Fizzy Peach — https://swatchly.xyz/palette/5a4010-67750f-7bb875-2b3000-f8bc64 */
@theme {
  --color-pineapple: #5a4010;
  --color-pineapple-50: #fff3e2;
  --color-pineapple-100: #fce8cb;
  --color-pineapple-200: #ebd4b1;
  --color-pineapple-300: #d7bd95;
  --color-pineapple-400: #ba9e72;
  --color-pineapple-500: #a08355;
  --color-pineapple-600: #84693c;
  --color-pineapple-700: #6c5329;
  --color-pineapple-800: #5a4010;
  --color-pineapple-900: #443111;
  --color-pineapple-950: #2c1e07;
  --color-topiary-green: #67750f;
  --color-topiary-green-50: #f1fccb;
  --color-topiary-green-100: #e6f3bb;
  --color-topiary-green-200: #d2e09e;
  --color-topiary-green-300: #bbcb7e;
  --color-topiary-green-400: #9cac55;
  --color-topiary-green-500: #819034;
  --color-topiary-green-600: #67750f;
  --color-topiary-green-700: #515d00;
  --color-topiary-green-800: #3f4900;
  --color-topiary-green-900: #303800;
  --color-topiary-green-950: #1d2300;
  --color-soon-to-be-hay: #7bb875;
  --color-soon-to-be-hay-50: #e6ffe3;
  --color-soon-to-be-hay-100: #d4fad0;
  --color-soon-to-be-hay-200: #bce9b7;
  --color-soon-to-be-hay-300: #a1d59c;
  --color-soon-to-be-hay-400: #7bb875;
  --color-soon-to-be-hay-500: #5f9b5a;
  --color-soon-to-be-hay-600: #447f3f;
  --color-soon-to-be-hay-700: #30662b;
  --color-soon-to-be-hay-800: #20501c;
  --color-soon-to-be-hay-900: #153e12;
  --color-soon-to-be-hay-950: #092707;
  --color-wasabi-nori: #2b3000;
  --color-wasabi-nori-50: #f3f9dd;
  --color-wasabi-nori-100: #e9efd0;
  --color-wasabi-nori-200: #d5dcb7;
  --color-wasabi-nori-300: #bfc69c;
  --color-wasabi-nori-400: #9ea677;
  --color-wasabi-nori-500: #81895a;
  --color-wasabi-nori-600: #666d40;
  --color-wasabi-nori-700: #4f552c;
  --color-wasabi-nori-800: #3b401d;
  --color-wasabi-nori-900: #2b3000;
  --color-wasabi-nori-950: #191c08;
  --color-fizzy-peach: #f8bc64;
  --color-fizzy-peach-50: #fff8ee;
  --color-fizzy-peach-100: #ffedd6;
  --color-fizzy-peach-200: #ffd69f;
  --color-fizzy-peach-300: #f8bc64;
  --color-fizzy-peach-400: #d39c49;
  --color-fizzy-peach-500: #b67e1c;
  --color-fizzy-peach-600: #956400;
  --color-fizzy-peach-700: #764e00;
  --color-fizzy-peach-800: #5c3c00;
  --color-fizzy-peach-900: #472d00;
  --color-fizzy-peach-950: #2d1b00;
}