Eggplant to Pasta Luego color palette

45004BEggplant 3D8331Overgrown Mausoleum 7BA8EEFennel Flower 253C82Deep Space Royal F8E285Pasta Luego

Open in generator Export PNG, PDF, ASE…

About this palette

Eggplant to Pasta Luego is a 5-color cool palette: #45004B (Eggplant), #3D8331 (Overgrown Mausoleum), #7BA8EE (Fennel Flower), #253C82 (Deep Space Royal), #F8E285 (Pasta Luego). It mixes purple, green, blue, yellow tones and feels cool overall. The strongest text pairing is #45004B on #F8E285 with a contrast ratio of 11.97:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Eggplant	rgb(69, 0, 75)	hsl(295, 100%, 15%)
Overgrown Mausoleum	rgb(61, 131, 49)	hsl(111, 46%, 35%)
Fennel Flower	rgb(123, 168, 238)	hsl(217, 77%, 71%)
Deep Space Royal	rgb(37, 60, 130)	hsl(225, 56%, 33%)
Pasta Luego	rgb(248, 226, 133)	hsl(49, 89%, 75%)

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.

Aa11.97:1 Very good#45004B on #F8E285
Aa11.97:1 Very good#F8E285 on #45004B
Aa7.92:1 Very good#253C82 on #F8E285
Aa7.92:1 Very good#F8E285 on #253C82
Aa6.41:1 Good#45004B on #7BA8EE
Aa6.41:1 Good#7BA8EE on #45004B
Aa4.24:1 Poor#7BA8EE on #253C82
Aa4.24:1 Poor#253C82 on #7BA8EE

Color blindness preview

CSS variables

/* Eggplant to Pasta Luego — https://swatchly.xyz/palette/45004b-3d8331-7ba8ee-253c82-f8e285 */
:root {
  --eggplant: #45004b;
  --overgrown-mausoleum: #3d8331;
  --fennel-flower: #7ba8ee;
  --deep-space-royal: #253c82;
  --pasta-luego: #f8e285;
}

Tailwind CSS v4

/* Eggplant to Pasta Luego — https://swatchly.xyz/palette/45004b-3d8331-7ba8ee-253c82-f8e285 */
@theme {
  --color-eggplant: #45004b;
  --color-eggplant-50: #fef0ff;
  --color-eggplant-100: #fde0ff;
  --color-eggplant-200: #f8c2fc;
  --color-eggplant-300: #e5a8e9;
  --color-eggplant-400: #c885cd;
  --color-eggplant-500: #ae6bb4;
  --color-eggplant-600: #945299;
  --color-eggplant-700: #7c3f81;
  --color-eggplant-800: #66306b;
  --color-eggplant-900: #552459;
  --color-eggplant-950: #45004b;
  --color-overgrown-mausoleum: #3d8331;
  --color-overgrown-mausoleum-50: #e2ffdd;
  --color-overgrown-mausoleum-100: #cefbc6;
  --color-overgrown-mausoleum-200: #b5eaac;
  --color-overgrown-mausoleum-300: #9ad68f;
  --color-overgrown-mausoleum-400: #75b96a;
  --color-overgrown-mausoleum-500: #589e4c;
  --color-overgrown-mausoleum-600: #3d8331;
  --color-overgrown-mausoleum-700: #28691d;
  --color-overgrown-mausoleum-800: #18530d;
  --color-overgrown-mausoleum-900: #0d4103;
  --color-overgrown-mausoleum-950: #042900;
  --color-fennel-flower: #7ba8ee;
  --color-fennel-flower-50: #f3f7ff;
  --color-fennel-flower-100: #e4efff;
  --color-fennel-flower-200: #c7ddff;
  --color-fennel-flower-300: #a3c7ff;
  --color-fennel-flower-400: #7ba8ee;
  --color-fennel-flower-500: #608bcf;
  --color-fennel-flower-600: #456fb0;
  --color-fennel-flower-700: #315792;
  --color-fennel-flower-800: #224377;
  --color-fennel-flower-900: #16335e;
  --color-fennel-flower-950: #0a1e3d;
  --color-deep-space-royal: #253c82;
  --color-deep-space-royal-50: #f1f5ff;
  --color-deep-space-royal-100: #e2ebff;
  --color-deep-space-royal-200: #c6d7ff;
  --color-deep-space-royal-300: #a5c0ff;
  --color-deep-space-royal-400: #809feb;
  --color-deep-space-royal-500: #6583cf;
  --color-deep-space-royal-600: #4c68b1;
  --color-deep-space-royal-700: #395193;
  --color-deep-space-royal-800: #253c82;
  --color-deep-space-royal-900: #1e2f60;
  --color-deep-space-royal-950: #101c40;
  --color-pasta-luego: #f8e285;
  --color-pasta-luego-50: #fbeeb8;
  --color-pasta-luego-100: #f8e285;
  --color-pasta-luego-200: #e1d08a;
  --color-pasta-luego-300: #cebb6c;
  --color-pasta-luego-400: #b19d42;
  --color-pasta-luego-500: #98821e;
  --color-pasta-luego-600: #7d6900;
  --color-pasta-luego-700: #645400;
  --color-pasta-luego-800: #4f4200;
  --color-pasta-luego-900: #3d3200;
  --color-pasta-luego-950: #261f00;
}