Start generating

Nocturne Red to Shadow Play color palette

724953Nocturne Red12040CNoir Fiction712950Pretty in Prune44260AChocolate Castle281800Shadow Play
Open in generator Export PNG, PDF, ASE…

About this palette

Nocturne Red to Shadow Play is a 5-color dark, warm palette: #724953 (Nocturne Red), #12040C (Noir Fiction), #712950 (Pretty in Prune), #44260A (Chocolate Castle), #281800 (Shadow Play). It mixes red, black, brown tones and feels warm overall. The strongest text pairing is #724953 on #12040C with a contrast ratio of 2.66:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nocturne Redrgb(114, 73, 83)hsl(345, 22%, 37%)
Noir Fictionrgb(18, 4, 12)hsl(326, 64%, 4%)
Pretty in Prunergb(113, 41, 80)hsl(328, 47%, 30%)
Chocolate Castlergb(68, 38, 10)hsl(29, 74%, 15%)
Shadow Playrgb(40, 24, 0)hsl(36, 100%, 8%)

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.

    Color blindness preview

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Nocturne Red to Shadow Play — https://swatchly.xyz/palette/724953-12040c-712950-44260a-281800 */
:root {
  --nocturne-red: #724953;
  --noir-fiction: #12040c;
  --pretty-in-prune: #712950;
  --chocolate-castle: #44260a;
  --shadow-play: #281800;
}

    Tailwind CSS v4

    /* Nocturne Red to Shadow Play — https://swatchly.xyz/palette/724953-12040c-712950-44260a-281800 */
@theme {
  --color-nocturne-red: #724953;
  --color-nocturne-red-50: #fff1f4;
  --color-nocturne-red-100: #ffe3e9;
  --color-nocturne-red-200: #f1cdd4;
  --color-nocturne-red-300: #deb5be;
  --color-nocturne-red-400: #c1949e;
  --color-nocturne-red-500: #a67983;
  --color-nocturne-red-600: #8a5f69;
  --color-nocturne-red-700: #724953;
  --color-nocturne-red-800: #5a3840;
  --color-nocturne-red-900: #462a31;
  --color-nocturne-red-950: #2d191e;
  --color-noir-fiction: #12040c;
  --color-noir-fiction-50: #fff0f8;
  --color-noir-fiction-100: #f6e6ee;
  --color-noir-fiction-200: #e4d1db;
  --color-noir-fiction-300: #cfbac5;
  --color-noir-fiction-400: #b19aa6;
  --color-noir-fiction-500: #907986;
  --color-noir-fiction-600: #705b66;
  --color-noir-fiction-700: #53414b;
  --color-noir-fiction-800: #3a2c34;
  --color-noir-fiction-900: #251b20;
  --color-noir-fiction-950: #12040c;
  --color-pretty-in-prune: #712950;
  --color-pretty-in-prune-50: #fff1f7;
  --color-pretty-in-prune-100: #ffe2ef;
  --color-pretty-in-prune-200: #ffc4df;
  --color-pretty-in-prune-300: #f1a9cb;
  --color-pretty-in-prune-400: #d687ad;
  --color-pretty-in-prune-500: #bb6c93;
  --color-pretty-in-prune-600: #9e5279;
  --color-pretty-in-prune-700: #843e62;
  --color-pretty-in-prune-800: #712950;
  --color-pretty-in-prune-900: #56213d;
  --color-pretty-in-prune-950: #391227;
  --color-chocolate-castle: #44260a;
  --color-chocolate-castle-50: #fff3e9;
  --color-chocolate-castle-100: #ffe6d3;
  --color-chocolate-castle-200: #eed1bb;
  --color-chocolate-castle-300: #dbbaa0;
  --color-chocolate-castle-400: #bc997d;
  --color-chocolate-castle-500: #a07c60;
  --color-chocolate-castle-600: #836146;
  --color-chocolate-castle-700: #694b32;
  --color-chocolate-castle-800: #523823;
  --color-chocolate-castle-900: #44260a;
  --color-chocolate-castle-950: #27180c;
  --color-shadow-play: #281800;
  --color-shadow-play-50: #fff3e3;
  --color-shadow-play-100: #f7e9d6;
  --color-shadow-play-200: #e5d5bf;
  --color-shadow-play-300: #d0bea5;
  --color-shadow-play-400: #b29e82;
  --color-shadow-play-500: #968266;
  --color-shadow-play-600: #7a674c;
  --color-shadow-play-700: #615038;
  --color-shadow-play-800: #4c3d28;
  --color-shadow-play-900: #392d1c;
  --color-shadow-play-950: #281800;
}

    Similar palettes