Start generating

Nocturne Red to Chantilly color palette

7B4C58Nocturne Red622E43Siren71C1AACeladon Porcelain2A7B6CPearl Green5C9E88Emerald OasisEEB7C5Chantilly
Open in generator Export PNG, PDF, ASE…

About this palette

Nocturne Red to Chantilly is a 6-color vintage palette: #7B4C58 (Nocturne Red), #622E43 (Siren), #71C1AA (Celadon Porcelain), #2A7B6C (Pearl Green), #5C9E88 (Emerald Oasis), #EEB7C5 (Chantilly). It mixes red, turquoise, pink tones and feels balanced overall. The strongest text pairing is #622E43 on #EEB7C5 with a contrast ratio of 6.13:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nocturne Redrgb(123, 76, 88)hsl(345, 24%, 39%)
Sirenrgb(98, 46, 67)hsl(336, 36%, 28%)
Celadon Porcelainrgb(113, 193, 170)hsl(163, 39%, 60%)
Pearl Greenrgb(42, 123, 108)hsl(169, 49%, 32%)
Emerald Oasisrgb(92, 158, 136)hsl(160, 26%, 49%)
Chantillyrgb(238, 183, 197)hsl(345, 62%, 83%)

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.

  • Aa6.13:1 Good#622E43 on #EEB7C5
  • Aa6.13:1 Good#EEB7C5 on #622E43
  • Aa4.98:1 Good#622E43 on #71C1AA
  • Aa4.98:1 Good#71C1AA on #622E43
  • Aa4.05:1 Poor#7B4C58 on #EEB7C5
  • Aa4.05:1 Poor#EEB7C5 on #7B4C58
  • Aa3.37:1 Poor#622E43 on #5C9E88
  • Aa3.37:1 Poor#5C9E88 on #622E43

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nocturne Red to Chantilly — https://swatchly.xyz/palette/7b4c58-622e43-71c1aa-2a7b6c-5c9e88-eeb7c5 */
:root {
  --nocturne-red: #7b4c58;
  --siren: #622e43;
  --celadon-porcelain: #71c1aa;
  --pearl-green: #2a7b6c;
  --emerald-oasis: #5c9e88;
  --chantilly: #eeb7c5;
}

Tailwind CSS v4

/* Nocturne Red to Chantilly — https://swatchly.xyz/palette/7b4c58-622e43-71c1aa-2a7b6c-5c9e88-eeb7c5 */
@theme {
  --color-nocturne-red: #7b4c58;
  --color-nocturne-red-50: #fff1f4;
  --color-nocturne-red-100: #ffe3e9;
  --color-nocturne-red-200: #f6ccd5;
  --color-nocturne-red-300: #e4b5c0;
  --color-nocturne-red-400: #c895a1;
  --color-nocturne-red-500: #ad7b87;
  --color-nocturne-red-600: #92626e;
  --color-nocturne-red-700: #7b4c58;
  --color-nocturne-red-800: #613a44;
  --color-nocturne-red-900: #4d2b34;
  --color-nocturne-red-950: #321a20;
  --color-siren: #622e43;
  --color-siren-50: #fff1f5;
  --color-siren-100: #ffe2ec;
  --color-siren-200: #f9c8d9;
  --color-siren-300: #e6afc2;
  --color-siren-400: #c98ea3;
  --color-siren-500: #ad7287;
  --color-siren-600: #8f586d;
  --color-siren-700: #754356;
  --color-siren-800: #622e43;
  --color-siren-900: #4a2533;
  --color-siren-950: #2f151f;
  --color-celadon-porcelain: #71c1aa;
  --color-celadon-porcelain-50: #ecfff9;
  --color-celadon-porcelain-100: #d2feef;
  --color-celadon-porcelain-200: #b9eedd;
  --color-celadon-porcelain-300: #9ddcc8;
  --color-celadon-porcelain-400: #71c1aa;
  --color-celadon-porcelain-500: #53a28c;
  --color-celadon-porcelain-600: #338470;
  --color-celadon-porcelain-700: #186a57;
  --color-celadon-porcelain-800: #035343;
  --color-celadon-porcelain-900: #003f32;
  --color-celadon-porcelain-950: #00261d;
  --color-pearl-green: #2a7b6c;
  --color-pearl-green-50: #d8fff5;
  --color-pearl-green-100: #c8f7eb;
  --color-pearl-green-200: #ade5d8;
  --color-pearl-green-300: #8fd0c1;
  --color-pearl-green-400: #68b2a2;
  --color-pearl-green-500: #489686;
  --color-pearl-green-600: #2a7b6c;
  --color-pearl-green-700: #156355;
  --color-pearl-green-800: #034e43;
  --color-pearl-green-900: #003c33;
  --color-pearl-green-950: #00261f;
  --color-emerald-oasis: #5c9e88;
  --color-emerald-oasis-50: #e0fff3;
  --color-emerald-oasis-100: #d1f9ea;
  --color-emerald-oasis-200: #b9e8d7;
  --color-emerald-oasis-300: #9ed5c1;
  --color-emerald-oasis-400: #7ab8a2;
  --color-emerald-oasis-500: #5c9e88;
  --color-emerald-oasis-600: #3f816c;
  --color-emerald-oasis-700: #296855;
  --color-emerald-oasis-800: #185141;
  --color-emerald-oasis-900: #0c3f31;
  --color-emerald-oasis-950: #04271d;
  --color-chantilly: #eeb7c5;
  --color-chantilly-50: #fff6f8;
  --color-chantilly-100: #ffeaef;
  --color-chantilly-200: #fad2db;
  --color-chantilly-300: #eeb7c5;
  --color-chantilly-400: #ca98a4;
  --color-chantilly-500: #ad7a88;
  --color-chantilly-600: #8f5f6c;
  --color-chantilly-700: #744955;
  --color-chantilly-800: #5c3641;
  --color-chantilly-900: #472831;
  --color-chantilly-950: #2e171e;
}

Similar palettes