Horror Snob to Walled Garden color palette

About this palette

Horror Snob to Walled Garden is a 5-color vibrant, cool, neon palette: #D74553 (Horror Snob), #007986 (Bermuda), #00E459 (Green Priestess), #9BA300 (Countryside), #3ACB2F (Walled Garden). It mixes red, turquoise, green tones and feels cool overall. The strongest text pairing is #007986 on #00E459 with a contrast ratio of 3.00:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Horror Snobrgb(215, 69, 83)hsl(354, 65%, 56%)
Bermudargb(0, 121, 134)hsl(186, 100%, 26%)
Green Priestessrgb(0, 228, 89)hsl(143, 100%, 45%)
Countrysidergb(155, 163, 0)hsl(63, 100%, 32%)
Walled Gardenrgb(58, 203, 47)hsl(116, 62%, 49%)

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.

  • Aa3.00:1 Poor#007986 on #00E459
  • Aa3.00:1 Poor#00E459 on #007986

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Horror Snob to Walled Garden — https://swatchly.xyz/palette/d74553-007986-00e459-9ba300-3acb2f */
:root {
  --horror-snob: #d74553;
  --bermuda: #007986;
  --green-priestess: #00e459;
  --countryside: #9ba300;
  --walled-garden: #3acb2f;
}

Tailwind CSS v4

/* Horror Snob to Walled Garden — https://swatchly.xyz/palette/d74553-007986-00e459-9ba300-3acb2f */
@theme {
  --color-horror-snob: #d74553;
  --color-horror-snob-50: #fff0f0;
  --color-horror-snob-100: #ffe1e0;
  --color-horror-snob-200: #ffc3c2;
  --color-horror-snob-300: #ff9d9f;
  --color-horror-snob-400: #f66770;
  --color-horror-snob-500: #d74553;
  --color-horror-snob-600: #b7283c;
  --color-horror-snob-700: #98102a;
  --color-horror-snob-800: #7c001d;
  --color-horror-snob-900: #620015;
  --color-horror-snob-950: #41000b;
  --color-bermuda: #007986;
  --color-bermuda-50: #e1fbff;
  --color-bermuda-100: #c0f6ff;
  --color-bermuda-200: #a3e4ee;
  --color-bermuda-300: #82cfda;
  --color-bermuda-400: #57b0bd;
  --color-bermuda-500: #3294a2;
  --color-bermuda-600: #007986;
  --color-bermuda-700: #00606b;
  --color-bermuda-800: #004b54;
  --color-bermuda-900: #003a41;
  --color-bermuda-950: #002429;
  --color-green-priestess: #00e459;
  --color-green-priestess-50: #dbffde;
  --color-green-priestess-100: #b4ffbc;
  --color-green-priestess-200: #7af48e;
  --color-green-priestess-300: #00e459;
  --color-green-priestess-400: #00bf49;
  --color-green-priestess-500: #00a03c;
  --color-green-priestess-600: #00812f;
  --color-green-priestess-700: #006724;
  --color-green-priestess-800: #00511a;
  --color-green-priestess-900: #003f13;
  --color-green-priestess-950: #002809;
  --color-countryside: #9ba300;
  --color-countryside-50: #f2fab6;
  --color-countryside-100: #e7efa2;
  --color-countryside-200: #d2db7d;
  --color-countryside-300: #bbc455;
  --color-countryside-400: #9ba300;
  --color-countryside-500: #818800;
  --color-countryside-600: #686d00;
  --color-countryside-700: #525700;
  --color-countryside-800: #414400;
  --color-countryside-900: #323500;
  --color-countryside-950: #1f2200;
  --color-walled-garden: #3acb2f;
  --color-walled-garden-50: #ebffe8;
  --color-walled-garden-100: #d0ffcb;
  --color-walled-garden-200: #9df894;
  --color-walled-garden-300: #7ae670;
  --color-walled-garden-400: #3acb2f;
  --color-walled-garden-500: #11ab00;
  --color-walled-garden-600: #0b8a00;
  --color-walled-garden-700: #076d00;
  --color-walled-garden-800: #045500;
  --color-walled-garden-900: #024100;
  --color-walled-garden-950: #012800;
}

Similar palettes