Jewel Weed to Nightmare Color Palette

About this palette

Jewel Weed to Nightmare is a 5-color cool palette: #44A88D (Jewel Weed), #C8B7FF (Violet Heaven), #394500 (Green Not Found), #9C506C (Cherry Berry), #0E1A00 (Nightmare). It mixes turquoise, purple, green, red, black tones and feels cool overall. The strongest text pairing is #C8B7FF on #0E1A00 with a contrast ratio of 10.01:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jewel Weed	rgb(68, 168, 141)	hsl(164, 42%, 46%)
Violet Heaven	rgb(200, 183, 255)	hsl(254, 100%, 86%)
Green Not Found	rgb(57, 69, 0)	hsl(70, 100%, 14%)
Cherry Berry	rgb(156, 80, 108)	hsl(338, 32%, 46%)
Nightmare	rgb(14, 26, 0)	hsl(88, 100%, 5%)

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.

Aa10.01:1 Very good#C8B7FF on #0E1A00
Aa10.01:1 Very good#0E1A00 on #C8B7FF
Aa6.20:1 Good#44A88D on #0E1A00
Aa6.20:1 Good#0E1A00 on #44A88D
Aa5.76:1 Good#C8B7FF on #394500
Aa5.76:1 Good#394500 on #C8B7FF
Aa3.57:1 Poor#44A88D on #394500
Aa3.57:1 Poor#394500 on #44A88D

Color blindness preview

CSS variables

/* Jewel Weed to Nightmare — https://swatchly.xyz/palette/44a88d-c8b7ff-394500-9c506c-0e1a00 */
:root {
  --jewel-weed: #44a88d;
  --violet-heaven: #c8b7ff;
  --green-not-found: #394500;
  --cherry-berry: #9c506c;
  --nightmare: #0e1a00;
}

Tailwind CSS v4

/* Jewel Weed to Nightmare — https://swatchly.xyz/palette/44a88d-c8b7ff-394500-9c506c-0e1a00 */
@theme {
  --color-jewel-weed: #44a88d;
  --color-jewel-weed-50: #c8feec;
  --color-jewel-weed-100: #b6f3df;
  --color-jewel-weed-200: #96e0c8;
  --color-jewel-weed-300: #73c8af;
  --color-jewel-weed-400: #44a88d;
  --color-jewel-weed-500: #248e75;
  --color-jewel-weed-600: #00755d;
  --color-jewel-weed-700: #005d4a;
  --color-jewel-weed-800: #004a3a;
  --color-jewel-weed-900: #003b2e;
  --color-jewel-weed-950: #00261d;
  --color-violet-heaven: #c8b7ff;
  --color-violet-heaven-50: #f7f5ff;
  --color-violet-heaven-100: #eeeaff;
  --color-violet-heaven-200: #dcd3ff;
  --color-violet-heaven-300: #c8b7ff;
  --color-violet-heaven-400: #a898da;
  --color-violet-heaven-500: #8c7bbf;
  --color-violet-heaven-600: #7160a1;
  --color-violet-heaven-700: #5a4a85;
  --color-violet-heaven-800: #46386b;
  --color-violet-heaven-900: #362a55;
  --color-violet-heaven-950: #221938;
  --color-green-not-found: #394500;
  --color-green-not-found-50: #f0fbd7;
  --color-green-not-found-100: #e6f1c9;
  --color-green-not-found-200: #d1deaf;
  --color-green-not-found-300: #b9c891;
  --color-green-not-found-400: #99a86c;
  --color-green-not-found-500: #7d8c4e;
  --color-green-not-found-600: #637035;
  --color-green-not-found-700: #4c5922;
  --color-green-not-found-800: #394500;
  --color-green-not-found-900: #2c340b;
  --color-green-not-found-950: #1a2004;
  --color-cherry-berry: #9c506c;
  --color-cherry-berry-50: #fff1f5;
  --color-cherry-berry-100: #ffe3eb;
  --color-cherry-berry-200: #ffc5d7;
  --color-cherry-berry-300: #f2a9c1;
  --color-cherry-berry-400: #d587a2;
  --color-cherry-berry-500: #b96a86;
  --color-cherry-berry-600: #9c506c;
  --color-cherry-berry-700: #803c55;
  --color-cherry-berry-800: #672c42;
  --color-cherry-berry-900: #511f33;
  --color-cherry-berry-950: #35111f;
  --color-nightmare: #0e1a00;
  --color-nightmare-50: #eff9e5;
  --color-nightmare-100: #e4f0d9;
  --color-nightmare-200: #cfddc2;
  --color-nightmare-300: #b8c7a9;
  --color-nightmare-400: #98a887;
  --color-nightmare-500: #7a8b69;
  --color-nightmare-600: #5f6e4e;
  --color-nightmare-700: #475539;
  --color-nightmare-800: #344028;
  --color-nightmare-900: #252e1b;
  --color-nightmare-950: #0e1a00;
}