Nightmare to Peppermint color palette

151E10Nightmare 31412EEverglade 426B34Botanical 6C8C6EKashmir 83B586Verde D1E7C7Peppermint

About this palette

Nightmare to Peppermint is a 6-color muted, cool, earthy, gradient palette: #151E10 (Nightmare), #31412E (Everglade), #426B34 (Botanical), #6C8C6E (Kashmir), #83B586 (Verde), #D1E7C7 (Peppermint). It mixes gray, green tones and feels cool overall. The strongest text pairing is #151E10 on #D1E7C7 with a contrast ratio of 13.03:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(21, 30, 16)	hsl(99, 30%, 9%)
Everglade	rgb(49, 65, 46)	hsl(111, 17%, 22%)
Botanical	rgb(66, 107, 52)	hsl(105, 35%, 31%)
Kashmir	rgb(108, 140, 110)	hsl(124, 13%, 49%)
Verde	rgb(131, 181, 134)	hsl(124, 25%, 61%)
Peppermint	rgb(209, 231, 199)	hsl(101, 40%, 84%)

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.

Aa13.03:1 Super#151E10 on #D1E7C7
Aa13.03:1 Super#D1E7C7 on #151E10
Aa8.29:1 Very good#31412E on #D1E7C7
Aa8.29:1 Very good#D1E7C7 on #31412E
Aa7.28:1 Very good#151E10 on #83B586
Aa7.28:1 Very good#83B586 on #151E10
Aa4.72:1 Good#426B34 on #D1E7C7
Aa4.72:1 Good#D1E7C7 on #426B34

Color blindness preview

CSS variables

/* Nightmare to Peppermint — https://swatchly.xyz/palette/151e10-31412e-426b34-6c8c6e-83b586-d1e7c7 */
:root {
  --nightmare: #151e10;
  --everglade: #31412e;
  --botanical: #426b34;
  --kashmir: #6c8c6e;
  --verde: #83b586;
  --peppermint: #d1e7c7;
}

Tailwind CSS v4

/* Nightmare to Peppermint — https://swatchly.xyz/palette/151e10-31412e-426b34-6c8c6e-83b586-d1e7c7 */
@theme {
  --color-nightmare: #151e10;
  --color-nightmare-50: #f1f8ed;
  --color-nightmare-100: #e6eee2;
  --color-nightmare-200: #d1dbcd;
  --color-nightmare-300: #bac5b5;
  --color-nightmare-400: #9aa694;
  --color-nightmare-500: #7e8978;
  --color-nightmare-600: #636e5d;
  --color-nightmare-700: #4c5647;
  --color-nightmare-800: #3a4235;
  --color-nightmare-900: #2a3127;
  --color-nightmare-950: #151e10;
  --color-everglade: #31412e;
  --color-everglade-50: #eef9ec;
  --color-everglade-100: #e3efe1;
  --color-everglade-200: #cedccb;
  --color-everglade-300: #b5c5b1;
  --color-everglade-400: #93a590;
  --color-everglade-500: #768973;
  --color-everglade-600: #5c6d59;
  --color-everglade-700: #465543;
  --color-everglade-800: #31412e;
  --color-everglade-900: #263124;
  --color-everglade-950: #161e15;
  --color-botanical: #426b34;
  --color-botanical-50: #e4fedc;
  --color-botanical-100: #d8f5cf;
  --color-botanical-200: #c3e5b9;
  --color-botanical-300: #abd19f;
  --color-botanical-400: #8bb47d;
  --color-botanical-500: #709b62;
  --color-botanical-600: #578149;
  --color-botanical-700: #426b34;
  --color-botanical-800: #325426;
  --color-botanical-900: #244119;
  --color-botanical-950: #142a0c;
  --color-kashmir: #6c8c6e;
  --color-kashmir-50: #e7fbe8;
  --color-kashmir-100: #dbf1dc;
  --color-kashmir-200: #c4dec5;
  --color-kashmir-300: #aac7ac;
  --color-kashmir-400: #88a88a;
  --color-kashmir-500: #6c8c6e;
  --color-kashmir-600: #537255;
  --color-kashmir-700: #3f5b41;
  --color-kashmir-800: #304831;
  --color-kashmir-900: #233825;
  --color-kashmir-950: #142315;
  --color-verde: #83b586;
  --color-verde-50: #e6ffe6;
  --color-verde-100: #d8f8da;
  --color-verde-200: #c1e6c3;
  --color-verde-300: #a8d2aa;
  --color-verde-400: #83b586;
  --color-verde-500: #67986b;
  --color-verde-600: #4d7c50;
  --color-verde-700: #38633c;
  --color-verde-800: #284e2b;
  --color-verde-900: #1b3c1f;
  --color-verde-950: #0e2510;
  --color-peppermint: #d1e7c7;
  --color-peppermint-50: #f3feee;
  --color-peppermint-100: #e9f6e4;
  --color-peppermint-200: #d1e7c7;
  --color-peppermint-300: #bcceb4;
  --color-peppermint-400: #9aad91;
  --color-peppermint-500: #7d9173;
  --color-peppermint-600: #627559;
  --color-peppermint-700: #4b5c43;
  --color-peppermint-800: #394832;
  --color-peppermint-900: #2b3725;
  --color-peppermint-950: #192215;
}