Nocturne Red to Swamp Thing Color Palette

About this palette

Nocturne Red to Swamp Thing is a 4-color vintage palette: #794C5F (Nocturne Red), #389C7B (Natural Orchestra), #F2C3DB (Sweetheart), #172C25 (Swamp Thing). It mixes red, turquoise, pink, gray tones and feels warm overall. The strongest text pairing is #F2C3DB on #172C25 with a contrast ratio of 9.56:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nocturne Red	rgb(121, 76, 95)	hsl(335, 23%, 39%)
Natural Orchestra	rgb(56, 156, 123)	hsl(160, 47%, 42%)
Sweetheart	rgb(242, 195, 219)	hsl(329, 64%, 86%)
Swamp Thing	rgb(23, 44, 37)	hsl(160, 31%, 13%)

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.

Aa9.56:1 Very good#F2C3DB on #172C25
Aa9.56:1 Very good#172C25 on #F2C3DB
Aa4.52:1 Good#794C5F on #F2C3DB
Aa4.52:1 Good#F2C3DB on #794C5F
Aa4.36:1 Poor#389C7B on #172C25
Aa4.36:1 Poor#172C25 on #389C7B

Color blindness preview

CSS variables

/* Nocturne Red to Swamp Thing — https://swatchly.xyz/palette/794c5f-389c7b-f2c3db-172c25 */
:root {
  --nocturne-red: #794c5f;
  --natural-orchestra: #389c7b;
  --sweetheart: #f2c3db;
  --swamp-thing: #172c25;
}

Tailwind CSS v4

/* Nocturne Red to Swamp Thing — https://swatchly.xyz/palette/794c5f-389c7b-f2c3db-172c25 */
@theme {
  --color-nocturne-red: #794c5f;
  --color-nocturne-red-50: #fff1f6;
  --color-nocturne-red-100: #ffe2ed;
  --color-nocturne-red-200: #f4ccdb;
  --color-nocturne-red-300: #e1b5c6;
  --color-nocturne-red-400: #c595a8;
  --color-nocturne-red-500: #ab7b8e;
  --color-nocturne-red-600: #906275;
  --color-nocturne-red-700: #794c5f;
  --color-nocturne-red-800: #603a4a;
  --color-nocturne-red-900: #4b2c39;
  --color-nocturne-red-950: #311a24;
  --color-natural-orchestra: #389c7b;
  --color-natural-orchestra-50: #dcfff0;
  --color-natural-orchestra-100: #c2fae3;
  --color-natural-orchestra-200: #a6e9ce;
  --color-natural-orchestra-300: #86d5b7;
  --color-natural-orchestra-400: #5cb796;
  --color-natural-orchestra-500: #389c7b;
  --color-natural-orchestra-600: #128061;
  --color-natural-orchestra-700: #00664c;
  --color-natural-orchestra-800: #00503b;
  --color-natural-orchestra-900: #003e2c;
  --color-natural-orchestra-950: #00271b;
  --color-sweetheart: #f2c3db;
  --color-sweetheart-50: #ffecf5;
  --color-sweetheart-100: #fcdded;
  --color-sweetheart-200: #f2c3db;
  --color-sweetheart-300: #d8b0c4;
  --color-sweetheart-400: #bb90a6;
  --color-sweetheart-500: #a0758c;
  --color-sweetheart-600: #845c72;
  --color-sweetheart-700: #6c485b;
  --color-sweetheart-800: #573748;
  --color-sweetheart-900: #442938;
  --color-sweetheart-950: #2b1823;
  --color-swamp-thing: #172c25;
  --color-swamp-thing-50: #ebf9f3;
  --color-swamp-thing-100: #e0efe9;
  --color-swamp-thing-200: #caddd5;
  --color-swamp-thing-300: #b1c7be;
  --color-swamp-thing-400: #90a89f;
  --color-swamp-thing-500: #768e85;
  --color-swamp-thing-600: #5e756c;
  --color-swamp-thing-700: #4a5f58;
  --color-swamp-thing-800: #3a4d46;
  --color-swamp-thing-900: #2d3e38;
  --color-swamp-thing-950: #172c25;
}