Nightmare to Crystal Palace Color Palette

About this palette

Nightmare to Crystal Palace is a 5-color muted, earthy, vintage, gradient palette: #132318 (Nightmare), #40442D (Palm Leaf), #666F3D (Muddy Green), #9D8C47 (Jalapeño), #D7CEAD (Crystal Palace). It mixes gray, green, yellow tones and feels balanced overall. The strongest text pairing is #132318 on #D7CEAD with a contrast ratio of 10.40:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(19, 35, 24)	hsl(139, 30%, 11%)
Palm Leaf	rgb(64, 68, 45)	hsl(70, 20%, 22%)
Muddy Green	rgb(102, 111, 61)	hsl(71, 29%, 34%)
Jalapeño	rgb(157, 140, 71)	hsl(48, 38%, 45%)
Crystal Palace	rgb(215, 206, 173)	hsl(47, 34%, 76%)

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.40:1 Very good#132318 on #D7CEAD
Aa10.40:1 Very good#D7CEAD on #132318
Aa6.40:1 Good#40442D on #D7CEAD
Aa6.40:1 Good#D7CEAD on #40442D
Aa4.90:1 Good#132318 on #9D8C47
Aa4.90:1 Good#9D8C47 on #132318
Aa3.41:1 Poor#666F3D on #D7CEAD
Aa3.41:1 Poor#D7CEAD on #666F3D

Color blindness preview

CSS variables

/* Nightmare to Crystal Palace — https://swatchly.xyz/palette/132318-40442d-666f3d-9d8c47-d7cead */
:root {
  --nightmare: #132318;
  --palm-leaf: #40442d;
  --muddy-green: #666f3d;
  --jalape-o: #9d8c47;
  --crystal-palace: #d7cead;
}

Tailwind CSS v4

/* Nightmare to Crystal Palace — https://swatchly.xyz/palette/132318-40442d-666f3d-9d8c47-d7cead */
@theme {
  --color-nightmare: #132318;
  --color-nightmare-50: #edf9f0;
  --color-nightmare-100: #e2efe5;
  --color-nightmare-200: #cddcd1;
  --color-nightmare-300: #b5c6b9;
  --color-nightmare-400: #94a799;
  --color-nightmare-500: #798c7e;
  --color-nightmare-600: #5f7164;
  --color-nightmare-700: #495a4e;
  --color-nightmare-800: #38463c;
  --color-nightmare-900: #2a362d;
  --color-nightmare-950: #132318;
  --color-palm-leaf: #40442d;
  --color-palm-leaf-50: #f4f7e8;
  --color-palm-leaf-100: #eaeddc;
  --color-palm-leaf-200: #d6dac6;
  --color-palm-leaf-300: #bfc4ad;
  --color-palm-leaf-400: #9fa48b;
  --color-palm-leaf-500: #84896f;
  --color-palm-leaf-600: #6a6e56;
  --color-palm-leaf-700: #535741;
  --color-palm-leaf-800: #40442d;
  --color-palm-leaf-900: #313424;
  --color-palm-leaf-950: #1e2014;
  --color-muddy-green: #666f3d;
  --color-muddy-green-50: #f3f9db;
  --color-muddy-green-100: #e8efce;
  --color-muddy-green-200: #d3dcb4;
  --color-muddy-green-300: #bcc598;
  --color-muddy-green-400: #9ca674;
  --color-muddy-green-500: #808a57;
  --color-muddy-green-600: #666f3d;
  --color-muddy-green-700: #50582c;
  --color-muddy-green-800: #3e451e;
  --color-muddy-green-900: #303514;
  --color-muddy-green-950: #1d2109;
  --color-jalape-o: #9d8c47;
  --color-jalape-o-50: #fff7d5;
  --color-jalape-o-100: #f8eec4;
  --color-jalape-o-200: #e8dbaa;
  --color-jalape-o-300: #d4c68c;
  --color-jalape-o-400: #b7a766;
  --color-jalape-o-500: #9d8c47;
  --color-jalape-o-600: #81702b;
  --color-jalape-o-700: #685814;
  --color-jalape-o-800: #524403;
  --color-jalape-o-900: #3f3400;
  --color-jalape-o-950: #272000;
  --color-crystal-palace: #d7cead;
  --color-crystal-palace-50: #f4efdb;
  --color-crystal-palace-100: #e9e3cd;
  --color-crystal-palace-200: #d7cead;
  --color-crystal-palace-300: #c1b99d;
  --color-crystal-palace-400: #a49b7d;
  --color-crystal-palace-500: #8a8263;
  --color-crystal-palace-600: #71694c;
  --color-crystal-palace-700: #5b5439;
  --color-crystal-palace-800: #49422b;
  --color-crystal-palace-900: #38331f;
  --color-crystal-palace-950: #231f11;
}