Start generating

Basil Smash to Everglade color palette

B8DE9CBasil Smash9BBA8CNorway709354Four Leaf Clover5D744AIrish Clover3E5333Zen Garden Olive2E3B25Everglade
Open in generator Export PNG, PDF, ASE…

About this palette

Basil Smash to Everglade is a 6-color cool, earthy, monochromatic, gradient palette: #B8DE9C (Basil Smash), #9BBA8C (Norway), #709354 (Four Leaf Clover), #5D744A (Irish Clover), #3E5333 (Zen Garden Olive), #2E3B25 (Everglade). It mixes green tones and feels cool overall. The strongest text pairing is #B8DE9C on #2E3B25 with a contrast ratio of 7.90:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Basil Smashrgb(184, 222, 156)hsl(95, 50%, 74%)
Norwayrgb(155, 186, 140)hsl(100, 25%, 64%)
Four Leaf Cloverrgb(112, 147, 84)hsl(93, 27%, 45%)
Irish Cloverrgb(93, 116, 74)hsl(93, 22%, 37%)
Zen Garden Olivergb(62, 83, 51)hsl(99, 24%, 26%)
Evergladergb(46, 59, 37)hsl(95, 23%, 19%)

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.90:1 Very good#B8DE9C on #2E3B25
  • Aa7.90:1 Very good#2E3B25 on #B8DE9C
  • Aa5.61:1 Good#B8DE9C on #3E5333
  • Aa5.61:1 Good#3E5333 on #B8DE9C
  • Aa5.54:1 Good#9BBA8C on #2E3B25
  • Aa5.54:1 Good#2E3B25 on #9BBA8C
  • Aa3.93:1 Poor#9BBA8C on #3E5333
  • Aa3.93:1 Poor#3E5333 on #9BBA8C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Basil Smash to Everglade — https://swatchly.xyz/palette/b8de9c-9bba8c-709354-5d744a-3e5333-2e3b25 */
:root {
  --basil-smash: #b8de9c;
  --norway: #9bba8c;
  --four-leaf-clover: #709354;
  --irish-clover: #5d744a;
  --zen-garden-olive: #3e5333;
  --everglade: #2e3b25;
}

Tailwind CSS v4

/* Basil Smash to Everglade — https://swatchly.xyz/palette/b8de9c-9bba8c-709354-5d744a-3e5333-2e3b25 */
@theme {
  --color-basil-smash: #b8de9c;
  --color-basil-smash-50: #e2f9d2;
  --color-basil-smash-100: #d5efc3;
  --color-basil-smash-200: #b8de9c;
  --color-basil-smash-300: #a6c78e;
  --color-basil-smash-400: #86a96c;
  --color-basil-smash-500: #6c8f51;
  --color-basil-smash-600: #547539;
  --color-basil-smash-700: #415e27;
  --color-basil-smash-800: #314b1a;
  --color-basil-smash-900: #243a10;
  --color-basil-smash-950: #152506;
  --color-norway: #9bba8c;
  --color-norway-50: #f1ffeb;
  --color-norway-100: #e7f9de;
  --color-norway-200: #d3e9c8;
  --color-norway-300: #bcd6b0;
  --color-norway-400: #9bba8c;
  --color-norway-500: #7e9b6f;
  --color-norway-600: #617e53;
  --color-norway-700: #4a643d;
  --color-norway-800: #374e2b;
  --color-norway-900: #283b1e;
  --color-norway-950: #16240f;
  --color-four-leaf-clover: #709354;
  --color-four-leaf-clover-50: #e8fed9;
  --color-four-leaf-clover-100: #dcf5cb;
  --color-four-leaf-clover-200: #c6e2b1;
  --color-four-leaf-clover-300: #adcd95;
  --color-four-leaf-clover-400: #8cae71;
  --color-four-leaf-clover-500: #709354;
  --color-four-leaf-clover-600: #57783b;
  --color-four-leaf-clover-700: #426028;
  --color-four-leaf-clover-800: #314b19;
  --color-four-leaf-clover-900: #243a0f;
  --color-four-leaf-clover-950: #152506;
  --color-irish-clover: #5d744a;
  --color-irish-clover-50: #ecfbe1;
  --color-irish-clover-100: #e1f2d5;
  --color-irish-clover-200: #cbdfbd;
  --color-irish-clover-300: #b3c9a2;
  --color-irish-clover-400: #92aa80;
  --color-irish-clover-500: #778f64;
  --color-irish-clover-600: #5d744a;
  --color-irish-clover-700: #485d37;
  --color-irish-clover-800: #374928;
  --color-irish-clover-900: #29381c;
  --color-irish-clover-950: #18230f;
  --color-zen-garden-olive: #3e5333;
  --color-zen-garden-olive-50: #ecfae5;
  --color-zen-garden-olive-100: #e1f1da;
  --color-zen-garden-olive-200: #caddc0;
  --color-zen-garden-olive-300: #b0c5a5;
  --color-zen-garden-olive-400: #8da482;
  --color-zen-garden-olive-500: #708765;
  --color-zen-garden-olive-600: #566b4b;
  --color-zen-garden-olive-700: #3e5333;
  --color-zen-garden-olive-800: #304028;
  --color-zen-garden-olive-900: #24321d;
  --color-zen-garden-olive-950: #151e10;
  --color-everglade: #2e3b25;
  --color-everglade-50: #eff9e9;
  --color-everglade-100: #e5efde;
  --color-everglade-200: #d0dcc8;
  --color-everglade-300: #b8c6af;
  --color-everglade-400: #99a88f;
  --color-everglade-500: #7e8d74;
  --color-everglade-600: #65735b;
  --color-everglade-700: #4f5d47;
  --color-everglade-800: #3e4a36;
  --color-everglade-900: #2e3b25;
  --color-everglade-950: #1d2518;
}

Similar palettes