Philodendron to Nightmare color palette

285F4EPhilodendron 446F60Moonlit Forest 1B4537Everglade 3C2F00Wasabi Nori 090D00Memorial Black 002414Nightmare

Open in generator Export PNG, PDF, ASE…

About this palette

Philodendron to Nightmare is a 6-color dark, cool palette: #285F4E (Philodendron), #446F60 (Moonlit Forest), #1B4537 (Everglade), #3C2F00 (Wasabi Nori), #090D00 (Memorial Black), #002414 (Nightmare). It mixes turquoise, brown, black, green tones and feels cool overall. The strongest text pairing is #446F60 on #090D00 with a contrast ratio of 3.45:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Philodendron	rgb(40, 95, 78)	hsl(161, 41%, 26%)
Moonlit Forest	rgb(68, 111, 96)	hsl(159, 24%, 35%)
Everglade	rgb(27, 69, 55)	hsl(160, 44%, 19%)
Wasabi Nori	rgb(60, 47, 0)	hsl(47, 100%, 12%)
Memorial Black	rgb(9, 13, 0)	hsl(78, 100%, 3%)
Nightmare	rgb(0, 36, 20)	hsl(153, 100%, 7%)

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.45:1 Poor#446F60 on #090D00
Aa3.45:1 Poor#090D00 on #446F60

Color blindness preview

CSS variables

/* Philodendron to Nightmare — https://swatchly.xyz/palette/285f4e-446f60-1b4537-3c2f00-090d00-002414 */
:root {
  --philodendron: #285f4e;
  --moonlit-forest: #446f60;
  --everglade: #1b4537;
  --wasabi-nori: #3c2f00;
  --memorial-black: #090d00;
  --nightmare: #002414;
}

Tailwind CSS v4

/* Philodendron to Nightmare — https://swatchly.xyz/palette/285f4e-446f60-1b4537-3c2f00-090d00-002414 */
@theme {
  --color-philodendron: #285f4e;
  --color-philodendron-50: #dffdf2;
  --color-philodendron-100: #d2f4e7;
  --color-philodendron-200: #b8e2d2;
  --color-philodendron-300: #9dccbb;
  --color-philodendron-400: #78ae9b;
  --color-philodendron-500: #5b927f;
  --color-philodendron-600: #417665;
  --color-philodendron-700: #285f4e;
  --color-philodendron-800: #1f4a3d;
  --color-philodendron-900: #14392e;
  --color-philodendron-950: #09241c;
  --color-moonlit-forest: #446f60;
  --color-moonlit-forest-50: #e3fcf2;
  --color-moonlit-forest-100: #d5f2e6;
  --color-moonlit-forest-200: #bbded1;
  --color-moonlit-forest-300: #a0c7b8;
  --color-moonlit-forest-400: #7ca797;
  --color-moonlit-forest-500: #5f8b7b;
  --color-moonlit-forest-600: #446f60;
  --color-moonlit-forest-700: #33584c;
  --color-moonlit-forest-800: #25463a;
  --color-moonlit-forest-900: #1a362d;
  --color-moonlit-forest-950: #0e221b;
  --color-everglade: #1b4537;
  --color-everglade-50: #e3fcf2;
  --color-everglade-100: #d7f3e7;
  --color-everglade-200: #bfe0d3;
  --color-everglade-300: #a4caba;
  --color-everglade-400: #80aa99;
  --color-everglade-500: #638d7d;
  --color-everglade-600: #487162;
  --color-everglade-700: #34584b;
  --color-everglade-800: #1b4537;
  --color-everglade-900: #19342a;
  --color-everglade-950: #0d2019;
  --color-wasabi-nori: #3c2f00;
  --color-wasabi-nori-50: #fdf5db;
  --color-wasabi-nori-100: #f4ebce;
  --color-wasabi-nori-200: #e2d7b5;
  --color-wasabi-nori-300: #cdc199;
  --color-wasabi-nori-400: #afa075;
  --color-wasabi-nori-500: #938458;
  --color-wasabi-nori-600: #776a3f;
  --color-wasabi-nori-700: #5f532c;
  --color-wasabi-nori-800: #4a3f1d;
  --color-wasabi-nori-900: #3c2f00;
  --color-wasabi-nori-950: #231d08;
  --color-memorial-black: #090d00;
  --color-memorial-black-50: #f3f7e9;
  --color-memorial-black-100: #e9eede;
  --color-memorial-black-200: #d5dac7;
  --color-memorial-black-300: #bec4af;
  --color-memorial-black-400: #9ea58e;
  --color-memorial-black-500: #7e856e;
  --color-memorial-black-600: #606650;
  --color-memorial-black-700: #464c39;
  --color-memorial-black-800: #313526;
  --color-memorial-black-900: #1f2217;
  --color-memorial-black-950: #090d00;
  --color-nightmare: #002414;
  --color-nightmare-50: #e6fbef;
  --color-nightmare-100: #daf2e4;
  --color-nightmare-200: #c3e0cf;
  --color-nightmare-300: #a9cab7;
  --color-nightmare-400: #87ac97;
  --color-nightmare-500: #6b907b;
  --color-nightmare-600: #517461;
  --color-nightmare-700: #3c5c4b;
  --color-nightmare-800: #2c4839;
  --color-nightmare-900: #1f372a;
  --color-nightmare-950: #002414;
}