Start generating

Candied Snow to Ficus Elastica color palette

DAFFECCandied Snow9FDABBTropical Freeze4BB579Mint1E985DEucalyptus0E7839Forestial005C2DFicus Elastica
Open in generator Export PNG, PDF, ASE…

About this palette

Candied Snow to Ficus Elastica is a 6-color cool, earthy, monochromatic, gradient palette: #DAFFEC (Candied Snow), #9FDABB (Tropical Freeze), #4BB579 (Mint), #1E985D (Eucalyptus), #0E7839 (Forestial), #005C2D (Ficus Elastica). It mixes white, green tones and feels cool overall. The strongest text pairing is #DAFFEC on #005C2D with a contrast ratio of 7.59:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Candied Snowrgb(218, 255, 236)hsl(149, 100%, 93%)
Tropical Freezergb(159, 218, 187)hsl(148, 44%, 74%)
Mintrgb(75, 181, 121)hsl(146, 42%, 50%)
Eucalyptusrgb(30, 152, 93)hsl(151, 67%, 36%)
Forestialrgb(14, 120, 57)hsl(144, 79%, 26%)
Ficus Elasticargb(0, 92, 45)hsl(149, 100%, 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.

  • Aa7.59:1 Very good#DAFFEC on #005C2D
  • Aa7.59:1 Very good#005C2D on #DAFFEC
  • Aa5.18:1 Good#DAFFEC on #0E7839
  • Aa5.18:1 Good#0E7839 on #DAFFEC
  • Aa5.15:1 Good#9FDABB on #005C2D
  • Aa5.15:1 Good#005C2D on #9FDABB
  • Aa3.51:1 Poor#9FDABB on #0E7839
  • Aa3.51:1 Poor#0E7839 on #9FDABB

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Candied Snow to Ficus Elastica — https://swatchly.xyz/palette/daffec-9fdabb-4bb579-1e985d-0e7839-005c2d */
:root {
  --candied-snow: #daffec;
  --tropical-freeze: #9fdabb;
  --mint: #4bb579;
  --eucalyptus: #1e985d;
  --forestial: #0e7839;
  --ficus-elastica: #005c2d;
}

Tailwind CSS v4

/* Candied Snow to Ficus Elastica — https://swatchly.xyz/palette/daffec-9fdabb-4bb579-1e985d-0e7839-005c2d */
@theme {
  --color-candied-snow: #daffec;
  --color-candied-snow-50: #daffec;
  --color-candied-snow-100: #dbf1e5;
  --color-candied-snow-200: #c4dfd1;
  --color-candied-snow-300: #abc9ba;
  --color-candied-snow-400: #89aa9a;
  --color-candied-snow-500: #6d8f7e;
  --color-candied-snow-600: #547464;
  --color-candied-snow-700: #3f5d4f;
  --color-candied-snow-800: #2f493d;
  --color-candied-snow-900: #22382e;
  --color-candied-snow-950: #13231c;
  --color-tropical-freeze: #9fdabb;
  --color-tropical-freeze-50: #eefff5;
  --color-tropical-freeze-100: #dafbe9;
  --color-tropical-freeze-200: #c2ebd5;
  --color-tropical-freeze-300: #9fdabb;
  --color-tropical-freeze-400: #81b79b;
  --color-tropical-freeze-500: #629a7e;
  --color-tropical-freeze-600: #467e62;
  --color-tropical-freeze-700: #30644b;
  --color-tropical-freeze-800: #204e39;
  --color-tropical-freeze-900: #143b2a;
  --color-tropical-freeze-950: #092519;
  --color-mint: #4bb579;
  --color-mint-50: #d8ffe4;
  --color-mint-100: #bcfad1;
  --color-mint-200: #9de9b8;
  --color-mint-300: #7cd39d;
  --color-mint-400: #4bb579;
  --color-mint-500: #2a995f;
  --color-mint-600: #007e48;
  --color-mint-700: #006438;
  --color-mint-800: #004f2b;
  --color-mint-900: #003d20;
  --color-mint-950: #002713;
  --color-eucalyptus: #1e985d;
  --color-eucalyptus-50: #daffe6;
  --color-eucalyptus-100: #bafbd1;
  --color-eucalyptus-200: #9be9b8;
  --color-eucalyptus-300: #78d49d;
  --color-eucalyptus-400: #4ab57a;
  --color-eucalyptus-500: #1e985d;
  --color-eucalyptus-600: #007c48;
  --color-eucalyptus-700: #006238;
  --color-eucalyptus-800: #004d2b;
  --color-eucalyptus-900: #003c20;
  --color-eucalyptus-950: #002612;
  --color-forestial: #0e7839;
  --color-forestial-50: #dfffe5;
  --color-forestial-100: #c2facd;
  --color-forestial-200: #a4e8b3;
  --color-forestial-300: #84d296;
  --color-forestial-400: #5ab271;
  --color-forestial-500: #379554;
  --color-forestial-600: #0e7839;
  --color-forestial-700: #00602a;
  --color-forestial-800: #004b20;
  --color-forestial-900: #003b17;
  --color-forestial-950: #00250c;
  --color-ficus-elastica: #005c2d;
  --color-ficus-elastica-50: #deffe6;
  --color-ficus-elastica-100: #caf9d6;
  --color-ficus-elastica-200: #ade6bc;
  --color-ficus-elastica-300: #8ecfa0;
  --color-ficus-elastica-400: #66af7c;
  --color-ficus-elastica-500: #46925f;
  --color-ficus-elastica-600: #2b7445;
  --color-ficus-elastica-700: #005c2d;
  --color-ficus-elastica-800: #084724;
  --color-ficus-elastica-900: #023719;
  --color-ficus-elastica-950: #00230d;
}

Similar palettes