Nightmare to In Good Taste color palette

181E09Nightmare 5C7931Luscious Lemongrass 493961Meteorite AE93B8Metal Petal BAD5A7In Good Taste

About this palette

Nightmare to In Good Taste is a 5-color cool, earthy palette: #181E09 (Nightmare), #5C7931 (Luscious Lemongrass), #493961 (Meteorite), #AE93B8 (Metal Petal), #BAD5A7 (In Good Taste). It mixes green, purple tones and feels cool overall. The strongest text pairing is #181E09 on #BAD5A7 with a contrast ratio of 10.72:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(24, 30, 9)	hsl(77, 54%, 8%)
Luscious Lemongrass	rgb(92, 121, 49)	hsl(84, 42%, 33%)
Meteorite	rgb(73, 57, 97)	hsl(264, 26%, 30%)
Metal Petal	rgb(174, 147, 184)	hsl(284, 21%, 65%)
In Good Taste	rgb(186, 213, 167)	hsl(95, 35%, 75%)

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.72:1 Very good#181E09 on #BAD5A7
Aa10.72:1 Very good#BAD5A7 on #181E09
Aa6.45:1 Good#493961 on #BAD5A7
Aa6.45:1 Good#BAD5A7 on #493961
Aa6.24:1 Good#181E09 on #AE93B8
Aa6.24:1 Good#AE93B8 on #181E09
Aa3.76:1 Poor#493961 on #AE93B8
Aa3.76:1 Poor#AE93B8 on #493961

Color blindness preview

CSS variables

/* Nightmare to In Good Taste — https://swatchly.xyz/palette/181e09-5c7931-493961-ae93b8-bad5a7 */
:root {
  --nightmare: #181e09;
  --luscious-lemongrass: #5c7931;
  --meteorite: #493961;
  --metal-petal: #ae93b8;
  --in-good-taste: #bad5a7;
}

Tailwind CSS v4

/* Nightmare to In Good Taste — https://swatchly.xyz/palette/181e09-5c7931-493961-ae93b8-bad5a7 */
@theme {
  --color-nightmare: #181e09;
  --color-nightmare-50: #f2f8e9;
  --color-nightmare-100: #e8eedd;
  --color-nightmare-200: #d4dbc7;
  --color-nightmare-300: #bdc5ae;
  --color-nightmare-400: #9da68d;
  --color-nightmare-500: #818970;
  --color-nightmare-600: #666e56;
  --color-nightmare-700: #4f5641;
  --color-nightmare-800: #3c4230;
  --color-nightmare-900: #2d3222;
  --color-nightmare-950: #181e09;
  --color-luscious-lemongrass: #5c7931;
  --color-luscious-lemongrass-50: #eafdd4;
  --color-luscious-lemongrass-100: #dff5c6;
  --color-luscious-lemongrass-200: #cae3ac;
  --color-luscious-lemongrass-300: #b1cd8f;
  --color-luscious-lemongrass-400: #91af6a;
  --color-luscious-lemongrass-500: #76944c;
  --color-luscious-lemongrass-600: #5c7931;
  --color-luscious-lemongrass-700: #47611e;
  --color-luscious-lemongrass-800: #364c0f;
  --color-luscious-lemongrass-900: #283b06;
  --color-luscious-lemongrass-950: #172501;
  --color-meteorite: #493961;
  --color-meteorite-50: #f7f3ff;
  --color-meteorite-100: #efe6ff;
  --color-meteorite-200: #ddd0f4;
  --color-meteorite-300: #c7b9e1;
  --color-meteorite-400: #a998c5;
  --color-meteorite-500: #8d7da9;
  --color-meteorite-600: #73638d;
  --color-meteorite-700: #5c4d73;
  --color-meteorite-800: #493961;
  --color-meteorite-900: #372c49;
  --color-meteorite-950: #231b2f;
  --color-metal-petal: #ae93b8;
  --color-metal-petal-50: #fbefff;
  --color-metal-petal-100: #f4e2fb;
  --color-metal-petal-200: #e2ccea;
  --color-metal-petal-300: #ccb4d5;
  --color-metal-petal-400: #ae93b8;
  --color-metal-petal-500: #93799c;
  --color-metal-petal-600: #785f81;
  --color-metal-petal-700: #614a69;
  --color-metal-petal-800: #4c3954;
  --color-metal-petal-900: #3c2b42;
  --color-metal-petal-950: #261a2a;
  --color-in-good-taste: #bad5a7;
  --color-in-good-taste-50: #f3ffeb;
  --color-in-good-taste-100: #e8f8dd;
  --color-in-good-taste-200: #d4e7c7;
  --color-in-good-taste-300: #bad5a7;
  --color-in-good-taste-400: #9ab389;
  --color-in-good-taste-500: #7d966a;
  --color-in-good-taste-600: #61794f;
  --color-in-good-taste-700: #4a603a;
  --color-in-good-taste-800: #384a29;
  --color-in-good-taste-900: #29381c;
  --color-in-good-taste-950: #18230f;
}