Fizzy Peach to Tropical Forest Color Palette

About this palette

Fizzy Peach to Tropical Forest is a 4-color palette: #F6B858 (Fizzy Peach), #B274CA (Lavendless), #906500 (Alligator), #004A49 (Tropical Forest). It mixes yellow, purple, brown, turquoise tones and feels balanced overall. The strongest text pairing is #F6B858 on #004A49 with a contrast ratio of 5.74:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fizzy Peach	rgb(246, 184, 88)	hsl(36, 90%, 65%)
Lavendless	rgb(178, 116, 202)	hsl(283, 45%, 62%)
Alligator	rgb(144, 101, 0)	hsl(42, 100%, 28%)
Tropical Forest	rgb(0, 74, 73)	hsl(179, 100%, 15%)

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.74:1 Good#F6B858 on #004A49
Aa5.74:1 Good#004A49 on #F6B858
Aa3.01:1 Poor#B274CA on #004A49
Aa3.01:1 Poor#004A49 on #B274CA

Color blindness preview

CSS variables

/* Fizzy Peach to Tropical Forest — https://swatchly.xyz/palette/f6b858-b274ca-906500-004a49 */
:root {
  --fizzy-peach: #f6b858;
  --lavendless: #b274ca;
  --alligator: #906500;
  --tropical-forest: #004a49;
}

Tailwind CSS v4

/* Fizzy Peach to Tropical Forest — https://swatchly.xyz/palette/f6b858-b274ca-906500-004a49 */
@theme {
  --color-fizzy-peach: #f6b858;
  --color-fizzy-peach-50: #fff6e9;
  --color-fizzy-peach-100: #ffebcf;
  --color-fizzy-peach-200: #ffd394;
  --color-fizzy-peach-300: #f6b858;
  --color-fizzy-peach-400: #d2983c;
  --color-fizzy-peach-500: #b67b00;
  --color-fizzy-peach-600: #926300;
  --color-fizzy-peach-700: #744e00;
  --color-fizzy-peach-800: #5b3c00;
  --color-fizzy-peach-900: #462d00;
  --color-fizzy-peach-950: #2d1b00;
  --color-lavendless: #b274ca;
  --color-lavendless-50: #fcf4ff;
  --color-lavendless-100: #f8e9ff;
  --color-lavendless-200: #f1cfff;
  --color-lavendless-300: #e6b2fb;
  --color-lavendless-400: #cb90e2;
  --color-lavendless-500: #b274ca;
  --color-lavendless-600: #9457ab;
  --color-lavendless-700: #78408d;
  --color-lavendless-800: #602e72;
  --color-lavendless-900: #4a205a;
  --color-lavendless-950: #2f113a;
  --color-alligator: #906500;
  --color-alligator-50: #fff4e1;
  --color-alligator-100: #ffe8c4;
  --color-alligator-200: #f6d39a;
  --color-alligator-300: #e3bb7a;
  --color-alligator-400: #c79b50;
  --color-alligator-500: #ac7f2d;
  --color-alligator-600: #906500;
  --color-alligator-700: #735000;
  --color-alligator-800: #5a3e00;
  --color-alligator-900: #462f00;
  --color-alligator-950: #2d1c00;
  --color-tropical-forest: #004a49;
  --color-tropical-forest-50: #dcfdfc;
  --color-tropical-forest-100: #cef4f2;
  --color-tropical-forest-200: #b5e2e0;
  --color-tropical-forest-300: #98ccca;
  --color-tropical-forest-400: #72adab;
  --color-tropical-forest-500: #54918f;
  --color-tropical-forest-600: #3a7574;
  --color-tropical-forest-700: #265d5c;
  --color-tropical-forest-800: #004a49;
  --color-tropical-forest-900: #0d3837;
  --color-tropical-forest-950: #052322;
}