Start generating

Groovy Lemon Pie to Moutarde de Bénichon color palette

CAC200Groovy Lemon PieD700D2Awkward PurpleBE18B0Punk Rock Purple3FA7FFCeruleanBB9000Moutarde de Bénichon
Open in generator Export PNG, PDF, ASE…

About this palette

Groovy Lemon Pie to Moutarde de Bénichon is a 5-color vibrant, warm, neon palette: #CAC200 (Groovy Lemon Pie), #D700D2 (Awkward Purple), #BE18B0 (Punk Rock Purple), #3FA7FF (Cerulean), #BB9000 (Moutarde de Bénichon). It mixes yellow, pink, blue tones and feels warm overall. The strongest text pairing is #CAC200 on #BE18B0 with a contrast ratio of 2.84:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Groovy Lemon Piergb(202, 194, 0)hsl(58, 100%, 40%)
Awkward Purplergb(215, 0, 210)hsl(301, 100%, 42%)
Punk Rock Purplergb(190, 24, 176)hsl(305, 78%, 42%)
Ceruleanrgb(63, 167, 255)hsl(208, 100%, 62%)
Moutarde de Bénichonrgb(187, 144, 0)hsl(46, 100%, 37%)

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

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Groovy Lemon Pie to Moutarde de Bénichon — https://swatchly.xyz/palette/cac200-d700d2-be18b0-3fa7ff-bb9000 */
:root {
  --groovy-lemon-pie: #cac200;
  --awkward-purple: #d700d2;
  --punk-rock-purple: #be18b0;
  --cerulean: #3fa7ff;
  --moutarde-de-b-nichon: #bb9000;
}

    Tailwind CSS v4

    /* Groovy Lemon Pie to Moutarde de Bénichon — https://swatchly.xyz/palette/cac200-d700d2-be18b0-3fa7ff-bb9000 */
@theme {
  --color-groovy-lemon-pie: #cac200;
  --color-groovy-lemon-pie-50: #faf8ab;
  --color-groovy-lemon-pie-100: #f0ed96;
  --color-groovy-lemon-pie-200: #ded96e;
  --color-groovy-lemon-pie-300: #cac200;
  --color-groovy-lemon-pie-400: #a9a300;
  --color-groovy-lemon-pie-500: #8d8700;
  --color-groovy-lemon-pie-600: #726d00;
  --color-groovy-lemon-pie-700: #5b5700;
  --color-groovy-lemon-pie-800: #474400;
  --color-groovy-lemon-pie-900: #373500;
  --color-groovy-lemon-pie-950: #222100;
  --color-awkward-purple: #d700d2;
  --color-awkward-purple-50: #ffeffd;
  --color-awkward-purple-100: #ffdffb;
  --color-awkward-purple-200: #ffbdf9;
  --color-awkward-purple-300: #ff90f7;
  --color-awkward-purple-400: #f546ee;
  --color-awkward-purple-500: #d700d2;
  --color-awkward-purple-600: #ae00aa;
  --color-awkward-purple-700: #8c0088;
  --color-awkward-purple-800: #6f006c;
  --color-awkward-purple-900: #570055;
  --color-awkward-purple-950: #390037;
  --color-punk-rock-purple: #be18b0;
  --color-punk-rock-purple-50: #fff0fc;
  --color-punk-rock-purple-100: #ffe3fa;
  --color-punk-rock-purple-200: #ffc5f5;
  --color-punk-rock-purple-300: #ff9ff1;
  --color-punk-rock-purple-400: #f665e5;
  --color-punk-rock-purple-500: #db41cb;
  --color-punk-rock-purple-600: #be18b0;
  --color-punk-rock-purple-700: #9b008f;
  --color-punk-rock-purple-800: #7a0071;
  --color-punk-rock-purple-900: #5f0057;
  --color-punk-rock-purple-950: #3e0038;
  --color-cerulean: #3fa7ff;
  --color-cerulean-50: #edf6ff;
  --color-cerulean-100: #dcedff;
  --color-cerulean-200: #b8dcff;
  --color-cerulean-300: #8cc7ff;
  --color-cerulean-400: #3fa7ff;
  --color-cerulean-500: #178ae0;
  --color-cerulean-600: #006fb9;
  --color-cerulean-700: #005894;
  --color-cerulean-800: #004576;
  --color-cerulean-900: #00355c;
  --color-cerulean-950: #00213c;
  --color-moutarde-de-b-nichon: #bb9000;
  --color-moutarde-de-b-nichon-50: #fff0ce;
  --color-moutarde-de-b-nichon-100: #ffe2a0;
  --color-moutarde-de-b-nichon-200: #eecc7a;
  --color-moutarde-de-b-nichon-300: #d9b252;
  --color-moutarde-de-b-nichon-400: #bb9000;
  --color-moutarde-de-b-nichon-500: #9c7800;
  --color-moutarde-de-b-nichon-600: #7e6000;
  --color-moutarde-de-b-nichon-700: #654d00;
  --color-moutarde-de-b-nichon-800: #503c00;
  --color-moutarde-de-b-nichon-900: #3f2f00;
  --color-moutarde-de-b-nichon-950: #291d00;
}

    Similar palettes