Nocturne Red to Snow White color palette

77475CNocturne Red 004232Zucchini A5D0BEWintermint BA6D8CPinky Pickle D494AAFoxy Pink E7FFF6Snow White

Open in generator Export PNG, PDF, ASE…

About this palette

Nocturne Red to Snow White is a 6-color vintage palette: #77475C (Nocturne Red), #004232 (Zucchini), #A5D0BE (Wintermint), #BA6D8C (Pinky Pickle), #D494AA (Foxy Pink), #E7FFF6 (Snow White). It mixes red, turquoise, pink, white tones and feels warm overall. The strongest text pairing is #004232 on #E7FFF6 with a contrast ratio of 10.97:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nocturne Red	rgb(119, 71, 92)	hsl(334, 25%, 37%)
Zucchini	rgb(0, 66, 50)	hsl(165, 100%, 13%)
Wintermint	rgb(165, 208, 190)	hsl(155, 31%, 73%)
Pinky Pickle	rgb(186, 109, 140)	hsl(336, 36%, 58%)
Foxy Pink	rgb(212, 148, 170)	hsl(339, 43%, 71%)
Snow White	rgb(231, 255, 246)	hsl(158, 100%, 95%)

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.97:1 Very good#004232 on #E7FFF6
Aa10.97:1 Very good#E7FFF6 on #004232
Aa7.05:1 Very good#77475C on #E7FFF6
Aa7.05:1 Very good#E7FFF6 on #77475C
Aa6.77:1 Good#004232 on #A5D0BE
Aa6.77:1 Good#A5D0BE on #004232
Aa4.72:1 Good#004232 on #D494AA
Aa4.72:1 Good#D494AA on #004232

Color blindness preview

CSS variables

/* Nocturne Red to Snow White — https://swatchly.xyz/palette/77475c-004232-a5d0be-ba6d8c-d494aa-e7fff6 */
:root {
  --nocturne-red: #77475c;
  --zucchini: #004232;
  --wintermint: #a5d0be;
  --pinky-pickle: #ba6d8c;
  --foxy-pink: #d494aa;
  --snow-white: #e7fff6;
}

Tailwind CSS v4

/* Nocturne Red to Snow White — https://swatchly.xyz/palette/77475c-004232-a5d0be-ba6d8c-d494aa-e7fff6 */
@theme {
  --color-nocturne-red: #77475c;
  --color-nocturne-red-50: #fff1f6;
  --color-nocturne-red-100: #ffe2ed;
  --color-nocturne-red-200: #f5cadb;
  --color-nocturne-red-300: #e2b2c6;
  --color-nocturne-red-400: #c692a7;
  --color-nocturne-red-500: #ab778c;
  --color-nocturne-red-600: #8f5d72;
  --color-nocturne-red-700: #77475c;
  --color-nocturne-red-800: #5e3748;
  --color-nocturne-red-900: #4a2937;
  --color-nocturne-red-950: #301822;
  --color-zucchini: #004232;
  --color-zucchini-50: #defef1;
  --color-zucchini-100: #d1f5e7;
  --color-zucchini-200: #b8e3d3;
  --color-zucchini-300: #9dcdbb;
  --color-zucchini-400: #7ab09c;
  --color-zucchini-500: #5d9582;
  --color-zucchini-600: #447b69;
  --color-zucchini-700: #306453;
  --color-zucchini-800: #215042;
  --color-zucchini-900: #004232;
  --color-zucchini-950: #0a2920;
  --color-wintermint: #a5d0be;
  --color-wintermint-50: #e6fef3;
  --color-wintermint-100: #dbf5ea;
  --color-wintermint-200: #c4e3d6;
  --color-wintermint-300: #a5d0be;
  --color-wintermint-400: #87af9e;
  --color-wintermint-500: #6a9382;
  --color-wintermint-600: #507768;
  --color-wintermint-700: #3b5f51;
  --color-wintermint-800: #2a4a3e;
  --color-wintermint-900: #1e392f;
  --color-wintermint-950: #10241c;
  --color-pinky-pickle: #ba6d8c;
  --color-pinky-pickle-50: #fff1f6;
  --color-pinky-pickle-100: #ffe4ed;
  --color-pinky-pickle-200: #ffc7db;
  --color-pinky-pickle-300: #f1abc6;
  --color-pinky-pickle-400: #d589a7;
  --color-pinky-pickle-500: #ba6d8c;
  --color-pinky-pickle-600: #9c5371;
  --color-pinky-pickle-700: #803e5a;
  --color-pinky-pickle-800: #672d46;
  --color-pinky-pickle-900: #512036;
  --color-pinky-pickle-950: #351221;
  --color-foxy-pink: #d494aa;
  --color-foxy-pink-50: #fff5f8;
  --color-foxy-pink-100: #ffe9ef;
  --color-foxy-pink-200: #fecedd;
  --color-foxy-pink-300: #edb6c8;
  --color-foxy-pink-400: #d494aa;
  --color-foxy-pink-500: #b5788d;
  --color-foxy-pink-600: #975c71;
  --color-foxy-pink-700: #7b4659;
  --color-foxy-pink-800: #623445;
  --color-foxy-pink-900: #4c2634;
  --color-foxy-pink-950: #301520;
  --color-snow-white: #e7fff6;
  --color-snow-white-50: #e7fff6;
  --color-snow-white-100: #e4f2ec;
  --color-snow-white-200: #cdded8;
  --color-snow-white-300: #b4c8c0;
  --color-snow-white-400: #93a8a0;
  --color-snow-white-500: #778c84;
  --color-snow-white-600: #5c716a;
  --color-snow-white-700: #475a53;
  --color-snow-white-800: #364741;
  --color-snow-white-900: #283631;
  --color-snow-white-950: #18221e;
}