Delta Mint to Nightmare Color Palette

About this palette

Delta Mint to Nightmare is a 4-color cool, earthy, monochromatic palette: #C2E3CE (Delta Mint), #406B55 (Toad King), #3C9F7F (Natural Orchestra), #0A2417 (Nightmare). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #C2E3CE on #0A2417 with a contrast ratio of 11.88:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Delta Mint	rgb(194, 227, 206)	hsl(142, 37%, 83%)
Toad King	rgb(64, 107, 85)	hsl(149, 25%, 34%)
Natural Orchestra	rgb(60, 159, 127)	hsl(161, 45%, 43%)
Nightmare	rgb(10, 36, 23)	hsl(150, 57%, 9%)

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.88:1 Very good#C2E3CE on #0A2417
Aa11.88:1 Very good#0A2417 on #C2E3CE
Aa5.05:1 Good#3C9F7F on #0A2417
Aa5.05:1 Good#0A2417 on #3C9F7F
Aa4.40:1 Poor#C2E3CE on #406B55
Aa4.40:1 Poor#406B55 on #C2E3CE

Color blindness preview

CSS variables

/* Delta Mint to Nightmare — https://swatchly.xyz/palette/c2e3ce-406b55-3c9f7f-0a2417 */
:root {
  --delta-mint: #c2e3ce;
  --toad-king: #406b55;
  --natural-orchestra: #3c9f7f;
  --nightmare: #0a2417;
}

Tailwind CSS v4

/* Delta Mint to Nightmare — https://swatchly.xyz/palette/c2e3ce-406b55-3c9f7f-0a2417 */
@theme {
  --color-delta-mint: #c2e3ce;
  --color-delta-mint-50: #eafcf0;
  --color-delta-mint-100: #dff3e6;
  --color-delta-mint-200: #c2e3ce;
  --color-delta-mint-300: #afcab9;
  --color-delta-mint-400: #8dab98;
  --color-delta-mint-500: #71907d;
  --color-delta-mint-600: #577462;
  --color-delta-mint-700: #425d4c;
  --color-delta-mint-800: #31493a;
  --color-delta-mint-900: #24382c;
  --color-delta-mint-950: #15231a;
  --color-toad-king: #406b55;
  --color-toad-king-50: #e3fcee;
  --color-toad-king-100: #d7f3e3;
  --color-toad-king-200: #c1e3d0;
  --color-toad-king-300: #aad0bb;
  --color-toad-king-400: #89b39c;
  --color-toad-king-500: #6e9a82;
  --color-toad-king-600: #55806a;
  --color-toad-king-700: #406b55;
  --color-toad-king-800: #2f5442;
  --color-toad-king-900: #224131;
  --color-toad-king-950: #122a1e;
  --color-natural-orchestra: #3c9f7f;
  --color-natural-orchestra-50: #defff1;
  --color-natural-orchestra-100: #c4fbe5;
  --color-natural-orchestra-200: #a8ebd1;
  --color-natural-orchestra-300: #89d7ba;
  --color-natural-orchestra-400: #60ba9a;
  --color-natural-orchestra-500: #3c9f7f;
  --color-natural-orchestra-600: #178264;
  --color-natural-orchestra-700: #00684e;
  --color-natural-orchestra-800: #00513d;
  --color-natural-orchestra-900: #003f2e;
  --color-natural-orchestra-950: #00271b;
  --color-nightmare: #0a2417;
  --color-nightmare-50: #e9faf0;
  --color-nightmare-100: #def1e5;
  --color-nightmare-200: #c7ded0;
  --color-nightmare-300: #afc8b9;
  --color-nightmare-400: #8da999;
  --color-nightmare-500: #718e7d;
  --color-nightmare-600: #587363;
  --color-nightmare-700: #435b4d;
  --color-nightmare-800: #32473b;
  --color-nightmare-900: #25372c;
  --color-nightmare-950: #0a2417;
}