Start generating

Sweet Mint Pesto to Chocolate Rush color palette

B2F2A0Sweet Mint PestoE09BF0Diva Mecha4E8741Beanpole005462Abyssal Waters551907Chocolate Rush
Open in generator Export PNG, PDF, ASE…

About this palette

Sweet Mint Pesto to Chocolate Rush is a 5-color cool, earthy palette: #B2F2A0 (Sweet Mint Pesto), #E09BF0 (Diva Mecha), #4E8741 (Beanpole), #005462 (Abyssal Waters), #551907 (Chocolate Rush). It mixes green, purple, turquoise, brown tones and feels cool overall. The strongest text pairing is #B2F2A0 on #551907 with a contrast ratio of 10.53:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Sweet Mint Pestorgb(178, 242, 160)hsl(107, 76%, 79%)
Diva Mechargb(224, 155, 240)hsl(289, 74%, 77%)
Beanpolergb(78, 135, 65)hsl(109, 35%, 39%)
Abyssal Watersrgb(0, 84, 98)hsl(189, 100%, 19%)
Chocolate Rushrgb(85, 25, 7)hsl(14, 85%, 18%)

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.53:1 Very good#B2F2A0 on #551907
  • Aa10.53:1 Very good#551907 on #B2F2A0
  • Aa6.62:1 Good#E09BF0 on #551907
  • Aa6.62:1 Good#551907 on #E09BF0
  • Aa6.59:1 Good#B2F2A0 on #005462
  • Aa6.59:1 Good#005462 on #B2F2A0
  • Aa4.14:1 Poor#E09BF0 on #005462
  • Aa4.14:1 Poor#005462 on #E09BF0

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Sweet Mint Pesto to Chocolate Rush — https://swatchly.xyz/palette/b2f2a0-e09bf0-4e8741-005462-551907 */
:root {
  --sweet-mint-pesto: #b2f2a0;
  --diva-mecha: #e09bf0;
  --beanpole: #4e8741;
  --abyssal-waters: #005462;
  --chocolate-rush: #551907;
}

Tailwind CSS v4

/* Sweet Mint Pesto to Chocolate Rush — https://swatchly.xyz/palette/b2f2a0-e09bf0-4e8741-005462-551907 */
@theme {
  --color-sweet-mint-pesto: #b2f2a0;
  --color-sweet-mint-pesto-50: #eeffea;
  --color-sweet-mint-pesto-100: #d8fdcd;
  --color-sweet-mint-pesto-200: #b2f2a0;
  --color-sweet-mint-pesto-300: #a3d794;
  --color-sweet-mint-pesto-400: #7db76d;
  --color-sweet-mint-pesto-500: #5f9b4d;
  --color-sweet-mint-pesto-600: #447e32;
  --color-sweet-mint-pesto-700: #2f651e;
  --color-sweet-mint-pesto-800: #204f0f;
  --color-sweet-mint-pesto-900: #153d06;
  --color-sweet-mint-pesto-950: #092701;
  --color-diva-mecha: #e09bf0;
  --color-diva-mecha-50: #fbebff;
  --color-diva-mecha-100: #f8daff;
  --color-diva-mecha-200: #f0bafd;
  --color-diva-mecha-300: #e09bf0;
  --color-diva-mecha-400: #c07ecf;
  --color-diva-mecha-500: #a563b4;
  --color-diva-mecha-600: #894b98;
  --color-diva-mecha-700: #71377e;
  --color-diva-mecha-800: #5b2866;
  --color-diva-mecha-900: #491d52;
  --color-diva-mecha-950: #2f0f36;
  --color-beanpole: #4e8741;
  --color-beanpole-50: #e2ffdc;
  --color-beanpole-100: #d5facc;
  --color-beanpole-200: #beeab5;
  --color-beanpole-300: #a5d79a;
  --color-beanpole-400: #83ba77;
  --color-beanpole-500: #67a15a;
  --color-beanpole-600: #4e8741;
  --color-beanpole-700: #386d2b;
  --color-beanpole-800: #26561b;
  --color-beanpole-900: #19420f;
  --color-beanpole-950: #0c2a05;
  --color-abyssal-waters: #005462;
  --color-abyssal-waters-50: #e4faff;
  --color-abyssal-waters-100: #caf4fd;
  --color-abyssal-waters-200: #b0e1ed;
  --color-abyssal-waters-300: #95cddb;
  --color-abyssal-waters-400: #70b0bf;
  --color-abyssal-waters-500: #5396a5;
  --color-abyssal-waters-600: #397c8b;
  --color-abyssal-waters-700: #256674;
  --color-abyssal-waters-800: #005462;
  --color-abyssal-waters-900: #08414b;
  --color-abyssal-waters-950: #012931;
  --color-chocolate-rush: #551907;
  --color-chocolate-rush-50: #fff2ee;
  --color-chocolate-rush-100: #ffe5dd;
  --color-chocolate-rush-200: #ffc9ba;
  --color-chocolate-rush-300: #efaf9d;
  --color-chocolate-rush-400: #d28d79;
  --color-chocolate-rush-500: #b5705d;
  --color-chocolate-rush-600: #975643;
  --color-chocolate-rush-700: #7b4030;
  --color-chocolate-rush-800: #622f21;
  --color-chocolate-rush-900: #551907;
  --color-chocolate-rush-950: #31130b;
}

Similar palettes