Nocturne Red to Elite Teal Color Palette

About this palette

Nocturne Red to Elite Teal is a 5-color muted, warm, vintage palette: #724952 (Nocturne Red), #A57982 (Never Forget), #8FBDBD (Riverbed), #F3C1C4 (Channel), #00332F (Elite Teal). It mixes red, pink, turquoise tones and feels warm overall. The strongest text pairing is #F3C1C4 on #00332F with a contrast ratio of 8.74:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nocturne Red	rgb(114, 73, 82)	hsl(347, 22%, 37%)
Never Forget	rgb(165, 121, 130)	hsl(348, 20%, 56%)
Riverbed	rgb(143, 189, 189)	hsl(180, 26%, 65%)
Channel	rgb(243, 193, 196)	hsl(356, 68%, 85%)
Elite Teal	rgb(0, 51, 47)	hsl(175, 100%, 10%)

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.

Aa8.74:1 Very good#F3C1C4 on #00332F
Aa8.74:1 Very good#00332F on #F3C1C4
Aa6.72:1 Good#8FBDBD on #00332F
Aa6.72:1 Good#00332F on #8FBDBD
Aa4.74:1 Good#724952 on #F3C1C4
Aa4.74:1 Good#F3C1C4 on #724952
Aa3.74:1 Poor#A57982 on #00332F
Aa3.74:1 Poor#00332F on #A57982

Color blindness preview

CSS variables

/* Nocturne Red to Elite Teal — https://swatchly.xyz/palette/724952-a57982-8fbdbd-f3c1c4-00332f */
:root {
  --nocturne-red: #724952;
  --never-forget: #a57982;
  --riverbed: #8fbdbd;
  --channel: #f3c1c4;
  --elite-teal: #00332f;
}

Tailwind CSS v4

/* Nocturne Red to Elite Teal — https://swatchly.xyz/palette/724952-a57982-8fbdbd-f3c1c4-00332f */
@theme {
  --color-nocturne-red: #724952;
  --color-nocturne-red-50: #fff1f4;
  --color-nocturne-red-100: #ffe3e8;
  --color-nocturne-red-200: #f2cdd4;
  --color-nocturne-red-300: #deb5bd;
  --color-nocturne-red-400: #c1949d;
  --color-nocturne-red-500: #a67982;
  --color-nocturne-red-600: #8a5f68;
  --color-nocturne-red-700: #724952;
  --color-nocturne-red-800: #5a3840;
  --color-nocturne-red-900: #462a30;
  --color-nocturne-red-950: #2d191e;
  --color-never-forget: #a57982;
  --color-never-forget-50: #fff1f4;
  --color-never-forget-100: #ffe3e8;
  --color-never-forget-200: #f1cdd4;
  --color-never-forget-300: #deb5bd;
  --color-never-forget-400: #c0959d;
  --color-never-forget-500: #a57982;
  --color-never-forget-600: #895f68;
  --color-never-forget-700: #6f4a52;
  --color-never-forget-800: #58383f;
  --color-never-forget-900: #452a30;
  --color-never-forget-950: #2c191d;
  --color-riverbed: #8fbdbd;
  --color-riverbed-50: #d8f4f4;
  --color-riverbed-100: #c9e9e9;
  --color-riverbed-200: #afd4d4;
  --color-riverbed-300: #8fbdbd;
  --color-riverbed-400: #73a0a0;
  --color-riverbed-500: #5a8787;
  --color-riverbed-600: #446e6e;
  --color-riverbed-700: #325959;
  --color-riverbed-800: #254747;
  --color-riverbed-900: #1a3939;
  --color-riverbed-950: #0e2324;
  --color-channel: #f3c1c4;
  --color-channel-50: #ffeaeb;
  --color-channel-100: #fddbdd;
  --color-channel-200: #f3c1c4;
  --color-channel-300: #d9aeb0;
  --color-channel-400: #bd8f92;
  --color-channel-500: #a27578;
  --color-channel-600: #875c5f;
  --color-channel-700: #6e484b;
  --color-channel-800: #59383a;
  --color-channel-900: #462a2c;
  --color-channel-950: #2d191a;
  --color-elite-teal: #00332f;
  --color-elite-teal-50: #e1fcf8;
  --color-elite-teal-100: #d5f2ee;
  --color-elite-teal-200: #bde0db;
  --color-elite-teal-300: #a2cac5;
  --color-elite-teal-400: #7daaa5;
  --color-elite-teal-500: #608d88;
  --color-elite-teal-600: #45716c;
  --color-elite-teal-700: #305853;
  --color-elite-teal-800: #20433f;
  --color-elite-teal-900: #00332f;
  --color-elite-teal-950: #0a1d1b;
}