Nightmare to Sage Sensation Color Palette

About this palette

Nightmare to Sage Sensation is a 5-color cool, earthy, gradient palette: #0B220D (Nightmare), #00532E (Moor-Monster), #007872 (Emperor Jade), #7DA630 (Leaf), #B8DD93 (Sage Sensation). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #0B220D on #B8DD93 with a contrast ratio of 11.05:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(11, 34, 13)	hsl(125, 51%, 9%)
Moor-Monster	rgb(0, 83, 46)	hsl(153, 100%, 16%)
Emperor Jade	rgb(0, 120, 114)	hsl(177, 100%, 24%)
Leaf	rgb(125, 166, 48)	hsl(81, 55%, 42%)
Sage Sensation	rgb(184, 221, 147)	hsl(90, 52%, 72%)

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.

Aa11.05:1 Very good#0B220D on #B8DD93
Aa11.05:1 Very good#B8DD93 on #0B220D
Aa6.06:1 Good#00532E on #B8DD93
Aa6.06:1 Good#B8DD93 on #00532E
Aa5.90:1 Good#0B220D on #7DA630
Aa5.90:1 Good#7DA630 on #0B220D
Aa3.51:1 Poor#007872 on #B8DD93
Aa3.51:1 Poor#B8DD93 on #007872

Color blindness preview

CSS variables

/* Nightmare to Sage Sensation — https://swatchly.xyz/palette/0b220d-00532e-007872-7da630-b8dd93 */
:root {
  --nightmare: #0b220d;
  --moor-monster: #00532e;
  --emperor-jade: #007872;
  --leaf: #7da630;
  --sage-sensation: #b8dd93;
}

Tailwind CSS v4

/* Nightmare to Sage Sensation — https://swatchly.xyz/palette/0b220d-00532e-007872-7da630-b8dd93 */
@theme {
  --color-nightmare: #0b220d;
  --color-nightmare-50: #eafaea;
  --color-nightmare-100: #dff1df;
  --color-nightmare-200: #c9dec9;
  --color-nightmare-300: #b1c9b1;
  --color-nightmare-400: #90aa90;
  --color-nightmare-500: #738e74;
  --color-nightmare-600: #59725a;
  --color-nightmare-700: #445a44;
  --color-nightmare-800: #324633;
  --color-nightmare-900: #253525;
  --color-nightmare-950: #0b220d;
  --color-moor-monster: #00532e;
  --color-moor-monster-50: #deffe8;
  --color-moor-monster-100: #cdf8db;
  --color-moor-monster-200: #b3e6c4;
  --color-moor-monster-300: #97d1ac;
  --color-moor-monster-400: #72b48a;
  --color-moor-monster-500: #54996f;
  --color-moor-monster-600: #3a7d56;
  --color-moor-monster-700: #256642;
  --color-moor-monster-800: #00532e;
  --color-moor-monster-900: #0b3f25;
  --color-moor-monster-950: #032815;
  --color-emperor-jade: #007872;
  --color-emperor-jade-50: #d6fffb;
  --color-emperor-jade-100: #c1f7f2;
  --color-emperor-jade-200: #a3e5df;
  --color-emperor-jade-300: #82cfc8;
  --color-emperor-jade-400: #57b0a9;
  --color-emperor-jade-500: #32948d;
  --color-emperor-jade-600: #007872;
  --color-emperor-jade-700: #005f5a;
  --color-emperor-jade-800: #004b47;
  --color-emperor-jade-900: #003a37;
  --color-emperor-jade-950: #002422;
  --color-leaf: #7da630;
  --color-leaf-50: #e1fdbd;
  --color-leaf-100: #d3f2a9;
  --color-leaf-200: #bbde87;
  --color-leaf-300: #a0c763;
  --color-leaf-400: #7da630;
  --color-leaf-500: #658c02;
  --color-leaf-600: #517100;
  --color-leaf-700: #405a00;
  --color-leaf-800: #324700;
  --color-leaf-900: #263800;
  --color-leaf-950: #172400;
  --color-sage-sensation: #b8dd93;
  --color-sage-sensation-50: #e1f8cd;
  --color-sage-sensation-100: #d4eebd;
  --color-sage-sensation-200: #b8dd93;
  --color-sage-sensation-300: #a6c686;
  --color-sage-sensation-400: #87a963;
  --color-sage-sensation-500: #6d8f48;
  --color-sage-sensation-600: #557530;
  --color-sage-sensation-700: #425e1e;
  --color-sage-sensation-800: #324b11;
  --color-sage-sensation-900: #253a08;
  --color-sage-sensation-950: #152502;
}