Sour Lime to What We Do in the Shadows color palette

About this palette

Sour Lime to What We Do in the Shadows is a 6-color neon palette: #BBC300 (Sour Lime), #9243E2 (Dreamscape Purple), #00A89D (Silken Jade), #F8FCBE (Yellow Mana), #005946 (Evergreen), #4D0B25 (What We Do in the Shadows). It mixes green, purple, turquoise, yellow, red tones and feels balanced overall. The strongest text pairing is #F8FCBE on #4D0B25 with a contrast ratio of 14.14:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Sour Limergb(187, 195, 0)hsl(62, 100%, 38%)
Dreamscape Purplergb(146, 67, 226)hsl(270, 73%, 57%)
Silken Jadergb(0, 168, 157)hsl(176, 100%, 33%)
Yellow Manargb(248, 252, 190)hsl(64, 91%, 87%)
Evergreenrgb(0, 89, 70)hsl(167, 100%, 17%)
What We Do in the Shadowsrgb(77, 11, 37)hsl(336, 75%, 17%)

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.

  • Aa14.14:1 Super#F8FCBE on #4D0B25
  • Aa14.14:1 Super#4D0B25 on #F8FCBE
  • Aa7.85:1 Very good#BBC300 on #4D0B25
  • Aa7.85:1 Very good#4D0B25 on #BBC300
  • Aa7.81:1 Very good#F8FCBE on #005946
  • Aa7.81:1 Very good#005946 on #F8FCBE
  • Aa5.10:1 Good#00A89D on #4D0B25
  • Aa5.10:1 Good#4D0B25 on #00A89D

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Sour Lime to What We Do in the Shadows — https://swatchly.xyz/palette/bbc300-9243e2-00a89d-f8fcbe-005946-4d0b25 */
:root {
  --sour-lime: #bbc300;
  --dreamscape-purple: #9243e2;
  --silken-jade: #00a89d;
  --yellow-mana: #f8fcbe;
  --evergreen: #005946;
  --what-we-do-in-the-shadows: #4d0b25;
}

Tailwind CSS v4

/* Sour Lime to What We Do in the Shadows — https://swatchly.xyz/palette/bbc300-9243e2-00a89d-f8fcbe-005946-4d0b25 */
@theme {
  --color-sour-lime: #bbc300;
  --color-sour-lime-50: #f1f9a9;
  --color-sour-lime-100: #e6ee93;
  --color-sour-lime-200: #d2da6a;
  --color-sour-lime-300: #bbc300;
  --color-sour-lime-400: #9da400;
  --color-sour-lime-500: #838800;
  --color-sour-lime-600: #696e00;
  --color-sour-lime-700: #545800;
  --color-sour-lime-800: #424500;
  --color-sour-lime-900: #343600;
  --color-sour-lime-950: #202200;
  --color-dreamscape-purple: #9243e2;
  --color-dreamscape-purple-50: #f7f3ff;
  --color-dreamscape-purple-100: #f1e9ff;
  --color-dreamscape-purple-200: #e3d2ff;
  --color-dreamscape-purple-300: #d3b7ff;
  --color-dreamscape-purple-400: #bd8cff;
  --color-dreamscape-purple-500: #ab61fe;
  --color-dreamscape-purple-600: #9243e2;
  --color-dreamscape-purple-700: #7728c0;
  --color-dreamscape-purple-800: #60129f;
  --color-dreamscape-purple-900: #4b0280;
  --color-dreamscape-purple-950: #300055;
  --color-silken-jade: #00a89d;
  --color-silken-jade-50: #e0fffb;
  --color-silken-jade-100: #bcfff7;
  --color-silken-jade-200: #9ef0e6;
  --color-silken-jade-300: #7cddd3;
  --color-silken-jade-400: #49c1b6;
  --color-silken-jade-500: #00a89d;
  --color-silken-jade-600: #00877e;
  --color-silken-jade-700: #006b64;
  --color-silken-jade-800: #00534d;
  --color-silken-jade-900: #00403b;
  --color-silken-jade-950: #002724;
  --color-yellow-mana: #f8fcbe;
  --color-yellow-mana-50: #f8fcbe;
  --color-yellow-mana-100: #edf0cb;
  --color-yellow-mana-200: #d9dcb0;
  --color-yellow-mana-300: #c3c694;
  --color-yellow-mana-400: #a4a76f;
  --color-yellow-mana-500: #888b51;
  --color-yellow-mana-600: #6e7038;
  --color-yellow-mana-700: #575925;
  --color-yellow-mana-800: #444517;
  --color-yellow-mana-900: #34350d;
  --color-yellow-mana-950: #202105;
  --color-evergreen: #005946;
  --color-evergreen-50: #dafff2;
  --color-evergreen-100: #cbf7e7;
  --color-evergreen-200: #b0e5d3;
  --color-evergreen-300: #95d2bd;
  --color-evergreen-400: #71b59f;
  --color-evergreen-500: #549b85;
  --color-evergreen-600: #39816d;
  --color-evergreen-700: #256b58;
  --color-evergreen-800: #005946;
  --color-evergreen-900: #084436;
  --color-evergreen-950: #012c22;
  --color-what-we-do-in-the-shadows: #4d0b25;
  --color-what-we-do-in-the-shadows-50: #fff1f4;
  --color-what-we-do-in-the-shadows-100: #ffe3e9;
  --color-what-we-do-in-the-shadows-200: #ffc6d3;
  --color-what-we-do-in-the-shadows-300: #f0abbc;
  --color-what-we-do-in-the-shadows-400: #d1869a;
  --color-what-we-do-in-the-shadows-500: #b3687d;
  --color-what-we-do-in-the-shadows-600: #934d61;
  --color-what-we-do-in-the-shadows-700: #75384a;
  --color-what-we-do-in-the-shadows-800: #5a2736;
  --color-what-we-do-in-the-shadows-900: #4d0b25;
  --color-what-we-do-in-the-shadows-950: #290d16;
}

Similar palettes