Groovy Lemon Pie to Kirby Color Palette

About this palette

Groovy Lemon Pie to Kirby is a 5-color vibrant, warm, neon palette: #DDBD00 (Groovy Lemon Pie), #CE3B00 (Lava Smoothie), #00CE26 (Monstrous Green), #E468D5 (Death of a Star), #DF44A4 (Kirby). It mixes yellow, red, green, pink tones and feels warm overall. The strongest text pairing is #DDBD00 on #CE3B00 with a contrast ratio of 2.67:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Groovy Lemon Pie	rgb(221, 189, 0)	hsl(51, 100%, 43%)
Lava Smoothie	rgb(206, 59, 0)	hsl(17, 100%, 40%)
Monstrous Green	rgb(0, 206, 38)	hsl(131, 100%, 40%)
Death of a Star	rgb(228, 104, 213)	hsl(307, 70%, 65%)
Kirby	rgb(223, 68, 164)	hsl(323, 71%, 57%)

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

/* Groovy Lemon Pie to Kirby — https://swatchly.xyz/palette/ddbd00-ce3b00-00ce26-e468d5-df44a4 */
:root {
  --groovy-lemon-pie: #ddbd00;
  --lava-smoothie: #ce3b00;
  --monstrous-green: #00ce26;
  --death-of-a-star: #e468d5;
  --kirby: #df44a4;
}

Tailwind CSS v4

/* Groovy Lemon Pie to Kirby — https://swatchly.xyz/palette/ddbd00-ce3b00-00ce26-e468d5-df44a4 */
@theme {
  --color-groovy-lemon-pie: #ddbd00;
  --color-groovy-lemon-pie-50: #fff5c7;
  --color-groovy-lemon-pie-100: #fdea98;
  --color-groovy-lemon-pie-200: #edd670;
  --color-groovy-lemon-pie-300: #ddbd00;
  --color-groovy-lemon-pie-400: #b99e00;
  --color-groovy-lemon-pie-500: #9b8400;
  --color-groovy-lemon-pie-600: #7d6a00;
  --color-groovy-lemon-pie-700: #635400;
  --color-groovy-lemon-pie-800: #4e4100;
  --color-groovy-lemon-pie-900: #3d3200;
  --color-groovy-lemon-pie-950: #261f00;
  --color-lava-smoothie: #ce3b00;
  --color-lava-smoothie-50: #fff2ee;
  --color-lava-smoothie-100: #ffe7e0;
  --color-lava-smoothie-200: #ffcfc1;
  --color-lava-smoothie-300: #ffb19a;
  --color-lava-smoothie-400: #ff7e59;
  --color-lava-smoothie-500: #eb592d;
  --color-lava-smoothie-600: #ce3b00;
  --color-lava-smoothie-700: #a52d00;
  --color-lava-smoothie-800: #822200;
  --color-lava-smoothie-900: #661800;
  --color-lava-smoothie-950: #420c00;
  --color-monstrous-green: #00ce26;
  --color-monstrous-green-50: #ebffea;
  --color-monstrous-green-100: #d0ffcd;
  --color-monstrous-green-200: #93fb92;
  --color-monstrous-green-300: #6ce86d;
  --color-monstrous-green-400: #00ce26;
  --color-monstrous-green-500: #00ab1e;
  --color-monstrous-green-600: #008a16;
  --color-monstrous-green-700: #006d0f;
  --color-monstrous-green-800: #005509;
  --color-monstrous-green-900: #004105;
  --color-monstrous-green-950: #002802;
  --color-death-of-a-star: #e468d5;
  --color-death-of-a-star-50: #ffeffc;
  --color-death-of-a-star-100: #ffdff9;
  --color-death-of-a-star-200: #ffbdf4;
  --color-death-of-a-star-300: #fe92ef;
  --color-death-of-a-star-400: #e468d5;
  --color-death-of-a-star-500: #c54bb8;
  --color-death-of-a-star-600: #a72e9b;
  --color-death-of-a-star-700: #8a1780;
  --color-death-of-a-star-800: #700467;
  --color-death-of-a-star-900: #580052;
  --color-death-of-a-star-950: #3a0035;
  --color-kirby: #df44a4;
  --color-kirby-50: #fff2f8;
  --color-kirby-100: #ffe4f1;
  --color-kirby-200: #ffc7e4;
  --color-kirby-300: #ffa3d4;
  --color-kirby-400: #fa67be;
  --color-kirby-500: #df44a4;
  --color-kirby-600: #be2187;
  --color-kirby-700: #9c006d;
  --color-kirby-800: #7c0055;
  --color-kirby-900: #600042;
  --color-kirby-950: #3f0029;
}