Nightmare to Yours Truly Color Palette

About this palette

Nightmare to Yours Truly is a 5-color cool palette: #152113 (Nightmare), #5F4A6F (Your Majesty), #678E53 (Homegrown), #48BAD4 (High Dive), #FFD9CD (Yours Truly). It mixes gray, purple, green, blue, pink tones and feels cool overall. The strongest text pairing is #152113 on #FFD9CD with a contrast ratio of 12.76:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(21, 33, 19)	hsl(111, 27%, 10%)
Your Majesty	rgb(95, 74, 111)	hsl(274, 20%, 36%)
Homegrown	rgb(103, 142, 83)	hsl(100, 26%, 44%)
High Dive	rgb(72, 186, 212)	hsl(191, 62%, 56%)
Yours Truly	rgb(255, 217, 205)	hsl(14, 100%, 90%)

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.

Aa12.76:1 Super#152113 on #FFD9CD
Aa12.76:1 Super#FFD9CD on #152113
Aa7.35:1 Very good#152113 on #48BAD4
Aa7.35:1 Very good#48BAD4 on #152113
Aa5.96:1 Good#5F4A6F on #FFD9CD
Aa5.96:1 Good#FFD9CD on #5F4A6F
Aa4.43:1 Poor#152113 on #678E53
Aa4.43:1 Poor#678E53 on #152113

Color blindness preview

CSS variables

/* Nightmare to Yours Truly — https://swatchly.xyz/palette/152113-5f4a6f-678e53-48bad4-ffd9cd */
:root {
  --nightmare: #152113;
  --your-majesty: #5f4a6f;
  --homegrown: #678e53;
  --high-dive: #48bad4;
  --yours-truly: #ffd9cd;
}

Tailwind CSS v4

/* Nightmare to Yours Truly — https://swatchly.xyz/palette/152113-5f4a6f-678e53-48bad4-ffd9cd */
@theme {
  --color-nightmare: #152113;
  --color-nightmare-50: #eff8ed;
  --color-nightmare-100: #e4efe3;
  --color-nightmare-200: #d0dccd;
  --color-nightmare-300: #b8c6b5;
  --color-nightmare-400: #98a795;
  --color-nightmare-500: #7c8b79;
  --color-nightmare-600: #62705f;
  --color-nightmare-700: #4c5849;
  --color-nightmare-800: #3a4538;
  --color-nightmare-900: #2b3429;
  --color-nightmare-950: #152113;
  --color-your-majesty: #5f4a6f;
  --color-your-majesty-50: #f9f2ff;
  --color-your-majesty-100: #f3e5ff;
  --color-your-majesty-200: #e1cfef;
  --color-your-majesty-300: #cbb7dc;
  --color-your-majesty-400: #ad97be;
  --color-your-majesty-500: #917ba3;
  --color-your-majesty-600: #766186;
  --color-your-majesty-700: #5f4a6f;
  --color-your-majesty-800: #4a3957;
  --color-your-majesty-900: #392b44;
  --color-your-majesty-950: #241a2c;
  --color-homegrown: #678e53;
  --color-homegrown-50: #e5fdda;
  --color-homegrown-100: #d8f3cb;
  --color-homegrown-200: #c0e0b1;
  --color-homegrown-300: #a6ca94;
  --color-homegrown-400: #83aa70;
  --color-homegrown-500: #678e53;
  --color-homegrown-600: #4f743b;
  --color-homegrown-700: #3b5d29;
  --color-homegrown-800: #2c491c;
  --color-homegrown-900: #203912;
  --color-homegrown-950: #122408;
  --color-high-dive: #48bad4;
  --color-high-dive-50: #ecfbff;
  --color-high-dive-100: #d5f6ff;
  --color-high-dive-200: #a2eafd;
  --color-high-dive-300: #80d6ec;
  --color-high-dive-400: #48bad4;
  --color-high-dive-500: #209cb5;
  --color-high-dive-600: #007e94;
  --color-high-dive-700: #006476;
  --color-high-dive-800: #004d5c;
  --color-high-dive-900: #003b46;
  --color-high-dive-950: #00242c;
  --color-yours-truly: #ffd9cd;
  --color-yours-truly-50: #ffe8e1;
  --color-yours-truly-100: #ffd9cd;
  --color-yours-truly-200: #e6c9c0;
  --color-yours-truly-300: #d3b3a9;
  --color-yours-truly-400: #b7958a;
  --color-yours-truly-500: #9d7b70;
  --color-yours-truly-600: #826258;
  --color-yours-truly-700: #6a4d44;
  --color-yours-truly-800: #553b33;
  --color-yours-truly-900: #422d26;
  --color-yours-truly-950: #2a1b16;
}