Start generating

Deep Pond to Toxic Frog color palette

004119Deep Pond105C2FFicus Elastica02883EBroccoli Paradise0AB948Intoxicate2DDC78Shivering Green82FBA1Toxic Frog
Open in generator Export PNG, PDF, ASE…

About this palette

Deep Pond to Toxic Frog is a 6-color vibrant, cool, monochromatic, gradient palette: #004119 (Deep Pond), #105C2F (Ficus Elastica), #02883E (Broccoli Paradise), #0AB948 (Intoxicate), #2DDC78 (Shivering Green), #82FBA1 (Toxic Frog). It mixes green tones and feels cool overall. The strongest text pairing is #004119 on #82FBA1 with a contrast ratio of 9.19:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Deep Pondrgb(0, 65, 25)hsl(143, 100%, 13%)
Ficus Elasticargb(16, 92, 47)hsl(144, 70%, 21%)
Broccoli Paradisergb(2, 136, 62)hsl(147, 97%, 27%)
Intoxicatergb(10, 185, 72)hsl(141, 90%, 38%)
Shivering Greenrgb(45, 220, 120)hsl(146, 71%, 52%)
Toxic Frogrgb(130, 251, 161)hsl(135, 94%, 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.

  • Aa9.19:1 Very good#004119 on #82FBA1
  • Aa9.19:1 Very good#82FBA1 on #004119
  • Aa6.56:1 Good#004119 on #2DDC78
  • Aa6.56:1 Good#2DDC78 on #004119
  • Aa6.27:1 Good#105C2F on #82FBA1
  • Aa6.27:1 Good#82FBA1 on #105C2F
  • Aa4.55:1 Good#004119 on #0AB948
  • Aa4.55:1 Good#0AB948 on #004119

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Deep Pond to Toxic Frog — https://swatchly.xyz/palette/004119-105c2f-02883e-0ab948-2ddc78-82fba1 */
:root {
  --deep-pond: #004119;
  --ficus-elastica: #105c2f;
  --broccoli-paradise: #02883e;
  --intoxicate: #0ab948;
  --shivering-green: #2ddc78;
  --toxic-frog: #82fba1;
}

Tailwind CSS v4

/* Deep Pond to Toxic Frog — https://swatchly.xyz/palette/004119-105c2f-02883e-0ab948-2ddc78-82fba1 */
@theme {
  --color-deep-pond: #004119;
  --color-deep-pond-50: #dfffe4;
  --color-deep-pond-100: #d2f6d8;
  --color-deep-pond-200: #b9e5c0;
  --color-deep-pond-300: #9ed0a7;
  --color-deep-pond-400: #7ab285;
  --color-deep-pond-500: #5d9669;
  --color-deep-pond-600: #447b50;
  --color-deep-pond-700: #30643d;
  --color-deep-pond-800: #214f2d;
  --color-deep-pond-900: #004119;
  --color-deep-pond-950: #0a2812;
  --color-ficus-elastica: #105c2f;
  --color-ficus-elastica-50: #dfffe6;
  --color-ficus-elastica-100: #cdf8d7;
  --color-ficus-elastica-200: #b1e5bd;
  --color-ficus-elastica-300: #92cfa1;
  --color-ficus-elastica-400: #6baf7e;
  --color-ficus-elastica-500: #4c9161;
  --color-ficus-elastica-600: #317447;
  --color-ficus-elastica-700: #105c2f;
  --color-ficus-elastica-800: #104725;
  --color-ficus-elastica-900: #08371a;
  --color-ficus-elastica-950: #03230e;
  --color-broccoli-paradise: #02883e;
  --color-broccoli-paradise-50: #dfffe4;
  --color-broccoli-paradise-100: #c0fecc;
  --color-broccoli-paradise-200: #a4eeb4;
  --color-broccoli-paradise-300: #85db98;
  --color-broccoli-paradise-400: #5abe74;
  --color-broccoli-paradise-500: #34a358;
  --color-broccoli-paradise-600: #02883e;
  --color-broccoli-paradise-700: #006c30;
  --color-broccoli-paradise-800: #005524;
  --color-broccoli-paradise-900: #00411a;
  --color-broccoli-paradise-950: #00290e;
  --color-intoxicate: #0ab948;
  --color-intoxicate-50: #d7ffda;
  --color-intoxicate-100: #abffb5;
  --color-intoxicate-200: #87ed96;
  --color-intoxicate-300: #5fd875;
  --color-intoxicate-400: #0ab948;
  --color-intoxicate-500: #009b3a;
  --color-intoxicate-600: #007d2d;
  --color-intoxicate-700: #006422;
  --color-intoxicate-800: #004f19;
  --color-intoxicate-900: #003e12;
  --color-intoxicate-950: #002809;
  --color-shivering-green: #2ddc78;
  --color-shivering-green-50: #d2ffdc;
  --color-shivering-green-100: #a3ffbd;
  --color-shivering-green-200: #7deea0;
  --color-shivering-green-300: #2ddc78;
  --color-shivering-green-400: #00ba60;
  --color-shivering-green-500: #009c4f;
  --color-shivering-green-600: #007e3f;
  --color-shivering-green-700: #006531;
  --color-shivering-green-800: #005025;
  --color-shivering-green-900: #003e1c;
  --color-shivering-green-950: #00270f;
  --color-toxic-frog: #82fba1;
  --color-toxic-frog-50: #eaffee;
  --color-toxic-frog-100: #cbffd4;
  --color-toxic-frog-200: #82fba1;
  --color-toxic-frog-300: #7dde95;
  --color-toxic-frog-400: #4bc06e;
  --color-toxic-frog-500: #18a34f;
  --color-toxic-frog-600: #00843b;
  --color-toxic-frog-700: #00682e;
  --color-toxic-frog-800: #005122;
  --color-toxic-frog-900: #003f19;
  --color-toxic-frog-950: #00270d;
}

Similar palettes