Avocado to Fennel Flower color palette

4E7C00Avocado 663982Galactic Grapevine FFC791Torchlight 002342Midnight Mirage 6BB2FFFennel Flower

About this palette

Avocado to Fennel Flower is a 5-color cool palette: #4E7C00 (Avocado), #663982 (Galactic Grapevine), #FFC791 (Torchlight), #002342 (Midnight Mirage), #6BB2FF (Fennel Flower). It mixes green, purple, orange, blue tones and feels cool overall. The strongest text pairing is #FFC791 on #002342 with a contrast ratio of 10.48:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Avocado	rgb(78, 124, 0)	hsl(82, 100%, 24%)
Galactic Grapevine	rgb(102, 57, 130)	hsl(277, 39%, 37%)
Torchlight	rgb(255, 199, 145)	hsl(29, 100%, 78%)
Midnight Mirage	rgb(0, 35, 66)	hsl(208, 100%, 13%)
Fennel Flower	rgb(107, 178, 255)	hsl(211, 100%, 71%)

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.

Aa10.48:1 Very good#FFC791 on #002342
Aa10.48:1 Very good#002342 on #FFC791
Aa7.15:1 Very good#002342 on #6BB2FF
Aa7.15:1 Very good#6BB2FF on #002342
Aa5.59:1 Good#663982 on #FFC791
Aa5.59:1 Good#FFC791 on #663982
Aa3.82:1 Poor#663982 on #6BB2FF
Aa3.82:1 Poor#6BB2FF on #663982

Color blindness preview

CSS variables

/* Avocado to Fennel Flower — https://swatchly.xyz/palette/4e7c00-663982-ffc791-002342-6bb2ff */
:root {
  --avocado: #4e7c00;
  --galactic-grapevine: #663982;
  --torchlight: #ffc791;
  --midnight-mirage: #002342;
  --fennel-flower: #6bb2ff;
}

Tailwind CSS v4

/* Avocado to Fennel Flower — https://swatchly.xyz/palette/4e7c00-663982-ffc791-002342-6bb2ff */
@theme {
  --color-avocado: #4e7c00;
  --color-avocado-50: #e6ffd0;
  --color-avocado-100: #d7f8b9;
  --color-avocado-200: #c0e79c;
  --color-avocado-300: #a6d27b;
  --color-avocado-400: #84b351;
  --color-avocado-500: #68972e;
  --color-avocado-600: #4e7c00;
  --color-avocado-700: #3d6200;
  --color-avocado-800: #2f4d00;
  --color-avocado-900: #233b00;
  --color-avocado-950: #142500;
  --color-galactic-grapevine: #663982;
  --color-galactic-grapevine-50: #f9f2ff;
  --color-galactic-grapevine-100: #f3e4ff;
  --color-galactic-grapevine-200: #e8c8ff;
  --color-galactic-grapevine-300: #d5acf2;
  --color-galactic-grapevine-400: #b689d6;
  --color-galactic-grapevine-500: #9a6cb9;
  --color-galactic-grapevine-600: #7e519b;
  --color-galactic-grapevine-700: #663982;
  --color-galactic-grapevine-800: #4f2c65;
  --color-galactic-grapevine-900: #3e2051;
  --color-galactic-grapevine-950: #271234;
  --color-torchlight: #ffc791;
  --color-torchlight-50: #ffefe1;
  --color-torchlight-100: #ffe2c7;
  --color-torchlight-200: #ffc791;
  --color-torchlight-300: #e3b385;
  --color-torchlight-400: #c69361;
  --color-torchlight-500: #ab7843;
  --color-torchlight-600: #8f5e2a;
  --color-torchlight-700: #754917;
  --color-torchlight-800: #5f3809;
  --color-torchlight-900: #4b2a02;
  --color-torchlight-950: #301900;
  --color-midnight-mirage: #002342;
  --color-midnight-mirage-50: #eef6ff;
  --color-midnight-mirage-100: #ddedff;
  --color-midnight-mirage-200: #bedbf9;
  --color-midnight-mirage-300: #a4c5e7;
  --color-midnight-mirage-400: #81a5cb;
  --color-midnight-mirage-500: #668ab0;
  --color-midnight-mirage-600: #4d7094;
  --color-midnight-mirage-700: #395a7a;
  --color-midnight-mirage-800: #2a4763;
  --color-midnight-mirage-900: #1f3750;
  --color-midnight-mirage-950: #002342;
  --color-fennel-flower: #6bb2ff;
  --color-fennel-flower-50: #f6faff;
  --color-fennel-flower-100: #e8f3ff;
  --color-fennel-flower-200: #cae3ff;
  --color-fennel-flower-300: #a5cfff;
  --color-fennel-flower-400: #6bb2ff;
  --color-fennel-flower-500: #4e93dd;
  --color-fennel-flower-600: #2f76be;
  --color-fennel-flower-700: #175c9e;
  --color-fennel-flower-800: #034680;
  --color-fennel-flower-900: #003564;
  --color-fennel-flower-950: #001f40;
}