Fennel Fiasco to Light Brown color palette

00A530Fennel Fiasco E09200Tiger King FF9B38Indian Saffron AC8EFFDreamy Candy Forest D54000Lava Smoothie B65F00Light Brown

Open in generator Export PNG, PDF, ASE…

About this palette

Fennel Fiasco to Light Brown is a 6-color vibrant, warm palette: #00A530 (Fennel Fiasco), #E09200 (Tiger King), #FF9B38 (Indian Saffron), #AC8EFF (Dreamy Candy Forest), #D54000 (Lava Smoothie), #B65F00 (Light Brown). It mixes green, orange, purple, red, brown tones and feels warm overall. The strongest text pairing is #FF9B38 on #D54000 with a contrast ratio of 2.19:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fennel Fiasco	rgb(0, 165, 48)	hsl(137, 100%, 32%)
Tiger King	rgb(224, 146, 0)	hsl(39, 100%, 44%)
Indian Saffron	rgb(255, 155, 56)	hsl(30, 100%, 61%)
Dreamy Candy Forest	rgb(172, 142, 255)	hsl(256, 100%, 78%)
Lava Smoothie	rgb(213, 64, 0)	hsl(18, 100%, 42%)
Light Brown	rgb(182, 95, 0)	hsl(31, 100%, 36%)

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

/* Fennel Fiasco to Light Brown — https://swatchly.xyz/palette/00a530-e09200-ff9b38-ac8eff-d54000-b65f00 */
:root {
  --fennel-fiasco: #00a530;
  --tiger-king: #e09200;
  --indian-saffron: #ff9b38;
  --dreamy-candy-forest: #ac8eff;
  --lava-smoothie: #d54000;
  --light-brown: #b65f00;
}

Tailwind CSS v4

/* Fennel Fiasco to Light Brown — https://swatchly.xyz/palette/00a530-e09200-ff9b38-ac8eff-d54000-b65f00 */
@theme {
  --color-fennel-fiasco: #00a530;
  --color-fennel-fiasco-50: #e2ffe2;
  --color-fennel-fiasco-100: #c1ffc2;
  --color-fennel-fiasco-200: #99f29e;
  --color-fennel-fiasco-300: #76de7e;
  --color-fennel-fiasco-400: #43c153;
  --color-fennel-fiasco-500: #00a530;
  --color-fennel-fiasco-600: #008525;
  --color-fennel-fiasco-700: #006a1b;
  --color-fennel-fiasco-800: #005313;
  --color-fennel-fiasco-900: #00400d;
  --color-fennel-fiasco-950: #002805;
  --color-tiger-king: #e09200;
  --color-tiger-king-50: #fff5e9;
  --color-tiger-king-100: #ffe9d0;
  --color-tiger-king-200: #ffd199;
  --color-tiger-king-300: #f8b55d;
  --color-tiger-king-400: #e09200;
  --color-tiger-king-500: #bb7900;
  --color-tiger-king-600: #976100;
  --color-tiger-king-700: #784c00;
  --color-tiger-king-800: #5e3b00;
  --color-tiger-king-900: #492c00;
  --color-tiger-king-950: #2e1a00;
  --color-indian-saffron: #ff9b38;
  --color-indian-saffron-50: #ffecdd;
  --color-indian-saffron-100: #ffddc1;
  --color-indian-saffron-200: #ffc08b;
  --color-indian-saffron-300: #ff9b38;
  --color-indian-saffron-400: #dd7e0c;
  --color-indian-saffron-500: #ba6800;
  --color-indian-saffron-600: #975400;
  --color-indian-saffron-700: #7a4200;
  --color-indian-saffron-800: #613400;
  --color-indian-saffron-900: #4e2800;
  --color-indian-saffron-950: #321800;
  --color-dreamy-candy-forest: #ac8eff;
  --color-dreamy-candy-forest-50: #f7f5ff;
  --color-dreamy-candy-forest-100: #eeeaff;
  --color-dreamy-candy-forest-200: #dcd3ff;
  --color-dreamy-candy-forest-300: #c7b7ff;
  --color-dreamy-candy-forest-400: #ac8eff;
  --color-dreamy-candy-forest-500: #9071df;
  --color-dreamy-candy-forest-600: #7556c0;
  --color-dreamy-candy-forest-700: #5e3fa0;
  --color-dreamy-candy-forest-800: #4a2e83;
  --color-dreamy-candy-forest-900: #392069;
  --color-dreamy-candy-forest-950: #231146;
  --color-lava-smoothie: #d54000;
  --color-lava-smoothie-50: #ffefeb;
  --color-lava-smoothie-100: #ffdfd6;
  --color-lava-smoothie-200: #ffc1ae;
  --color-lava-smoothie-300: #ff9b7d;
  --color-lava-smoothie-400: #f66335;
  --color-lava-smoothie-500: #d54000;
  --color-lava-smoothie-600: #ad3200;
  --color-lava-smoothie-700: #8b2600;
  --color-lava-smoothie-800: #6f1d00;
  --color-lava-smoothie-900: #581500;
  --color-lava-smoothie-950: #3b0a00;
  --color-light-brown: #b65f00;
  --color-light-brown-50: #ffefe5;
  --color-light-brown-100: #ffe0ca;
  --color-light-brown-200: #ffc297;
  --color-light-brown-300: #f5a264;
  --color-light-brown-400: #d67d35;
  --color-light-brown-500: #b65f00;
  --color-light-brown-600: #944c00;
  --color-light-brown-700: #763c00;
  --color-light-brown-800: #5e2e00;
  --color-light-brown-900: #4b2300;
  --color-light-brown-950: #311500;
}