Start generating

Shivering Green to Bucolic color palette

27E27BShivering Green00944CMoss5DB37ELily PadsA8FBB0Creamy Mint002E0CHaunted Forest2D6630Bucolic
Open in generator Export PNG, PDF, ASE…

About this palette

Shivering Green to Bucolic is a 6-color cool, monochromatic palette: #27E27B (Shivering Green), #00944C (Moss), #5DB37E (Lily Pads), #A8FBB0 (Creamy Mint), #002E0C (Haunted Forest), #2D6630 (Bucolic). It mixes green tones and feels cool overall. The strongest text pairing is #A8FBB0 on #002E0C with a contrast ratio of 12.24:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Shivering Greenrgb(39, 226, 123)hsl(147, 76%, 52%)
Mossrgb(0, 148, 76)hsl(151, 100%, 29%)
Lily Padsrgb(93, 179, 126)hsl(143, 36%, 53%)
Creamy Mintrgb(168, 251, 176)hsl(126, 91%, 82%)
Haunted Forestrgb(0, 46, 12)hsl(136, 100%, 9%)
Bucolicrgb(45, 102, 48)hsl(123, 39%, 29%)

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.

  • Aa12.24:1 Super#A8FBB0 on #002E0C
  • Aa12.24:1 Super#002E0C on #A8FBB0
  • Aa8.77:1 Very good#27E27B on #002E0C
  • Aa8.77:1 Very good#002E0C on #27E27B
  • Aa5.88:1 Good#5DB37E on #002E0C
  • Aa5.88:1 Good#002E0C on #5DB37E
  • Aa5.59:1 Good#A8FBB0 on #2D6630
  • Aa5.59:1 Good#2D6630 on #A8FBB0

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Shivering Green to Bucolic — https://swatchly.xyz/palette/27e27b-00944c-5db37e-a8fbb0-002e0c-2d6630 */
:root {
  --shivering-green: #27e27b;
  --moss: #00944c;
  --lily-pads: #5db37e;
  --creamy-mint: #a8fbb0;
  --haunted-forest: #002e0c;
  --bucolic: #2d6630;
}

Tailwind CSS v4

/* Shivering Green to Bucolic — https://swatchly.xyz/palette/27e27b-00944c-5db37e-a8fbb0-002e0c-2d6630 */
@theme {
  --color-shivering-green: #27e27b;
  --color-shivering-green-50: #daffe3;
  --color-shivering-green-100: #b2ffc7;
  --color-shivering-green-200: #80f2a4;
  --color-shivering-green-300: #27e27b;
  --color-shivering-green-400: #00bf63;
  --color-shivering-green-500: #009f52;
  --color-shivering-green-600: #008041;
  --color-shivering-green-700: #006632;
  --color-shivering-green-800: #005026;
  --color-shivering-green-900: #003e1c;
  --color-shivering-green-950: #00270f;
  --color-moss: #00944c;
  --color-moss-50: #d7ffe1;
  --color-moss-100: #b5fbc8;
  --color-moss-200: #94e8ac;
  --color-moss-300: #6fd28f;
  --color-moss-400: #3eb269;
  --color-moss-500: #00944c;
  --color-moss-600: #00773c;
  --color-moss-700: #005f2f;
  --color-moss-800: #004b23;
  --color-moss-900: #003b1a;
  --color-moss-950: #00260f;
  --color-lily-pads: #5db37e;
  --color-lily-pads-50: #d9ffe5;
  --color-lily-pads-100: #c4f8d4;
  --color-lily-pads-200: #a7e7bc;
  --color-lily-pads-300: #88d1a2;
  --color-lily-pads-400: #5db37e;
  --color-lily-pads-500: #409764;
  --color-lily-pads-600: #237c4c;
  --color-lily-pads-700: #0a6438;
  --color-lily-pads-800: #004f2a;
  --color-lily-pads-900: #003e20;
  --color-lily-pads-950: #002712;
  --color-creamy-mint: #a8fbb0;
  --color-creamy-mint-50: #cdfdd1;
  --color-creamy-mint-100: #a8fbb0;
  --color-creamy-mint-200: #a5e3aa;
  --color-creamy-mint-300: #8ad090;
  --color-creamy-mint-400: #65b36e;
  --color-creamy-mint-500: #479853;
  --color-creamy-mint-600: #2d7e3b;
  --color-creamy-mint-700: #186629;
  --color-creamy-mint-800: #07511b;
  --color-creamy-mint-900: #003f11;
  --color-creamy-mint-950: #002807;
  --color-haunted-forest: #002e0c;
  --color-haunted-forest-50: #e3fde5;
  --color-haunted-forest-100: #d7f4da;
  --color-haunted-forest-200: #bfe2c3;
  --color-haunted-forest-300: #a5cda9;
  --color-haunted-forest-400: #83af88;
  --color-haunted-forest-500: #67946d;
  --color-haunted-forest-600: #4f7a55;
  --color-haunted-forest-700: #3b6341;
  --color-haunted-forest-800: #2c5031;
  --color-haunted-forest-900: #214025;
  --color-haunted-forest-950: #002e0c;
  --color-bucolic: #2d6630;
  --color-bucolic-50: #e1ffe0;
  --color-bucolic-100: #d2f7d1;
  --color-bucolic-200: #b9e6b9;
  --color-bucolic-300: #9fd19e;
  --color-bucolic-400: #7bb37c;
  --color-bucolic-500: #5e985f;
  --color-bucolic-600: #457d47;
  --color-bucolic-700: #2d6630;
  --color-bucolic-800: #215024;
  --color-bucolic-900: #163e19;
  --color-bucolic-950: #0a270c;
}

Similar palettes