Start generating

Nocturnal Expedition to Fatback color palette

004759Nocturnal Expedition23676EPersian MosaicAD606CCinnapinkCD95A0RosettiE5CAACMacadamiaFFF7EEFatback
Open in generator Export PNG, PDF, ASE…

About this palette

Nocturnal Expedition to Fatback is a 6-color vintage palette: #004759 (Nocturnal Expedition), #23676E (Persian Mosaic), #AD606C (Cinnapink), #CD95A0 (Rosetti), #E5CAAC (Macadamia), #FFF7EE (Fatback). It mixes blue, turquoise, red, pink, orange, white tones and feels warm overall. The strongest text pairing is #004759 on #FFF7EE with a contrast ratio of 9.68:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nocturnal Expeditionrgb(0, 71, 89)hsl(192, 100%, 17%)
Persian Mosaicrgb(35, 103, 110)hsl(186, 52%, 28%)
Cinnapinkrgb(173, 96, 108)hsl(351, 32%, 53%)
Rosettirgb(205, 149, 160)hsl(348, 36%, 69%)
Macadamiargb(229, 202, 172)hsl(32, 52%, 79%)
Fatbackrgb(255, 247, 238)hsl(32, 100%, 97%)

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.68:1 Very good#004759 on #FFF7EE
  • Aa9.68:1 Very good#FFF7EE on #004759
  • Aa6.54:1 Good#004759 on #E5CAAC
  • Aa6.54:1 Good#E5CAAC on #004759
  • Aa6.11:1 Good#23676E on #FFF7EE
  • Aa6.11:1 Good#FFF7EE on #23676E
  • Aa4.24:1 Poor#AD606C on #FFF7EE
  • Aa4.24:1 Poor#FFF7EE on #AD606C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nocturnal Expedition to Fatback — https://swatchly.xyz/palette/004759-23676e-ad606c-cd95a0-e5caac-fff7ee */
:root {
  --nocturnal-expedition: #004759;
  --persian-mosaic: #23676e;
  --cinnapink: #ad606c;
  --rosetti: #cd95a0;
  --macadamia: #e5caac;
  --fatback: #fff7ee;
}

Tailwind CSS v4

/* Nocturnal Expedition to Fatback — https://swatchly.xyz/palette/004759-23676e-ad606c-cd95a0-e5caac-fff7ee */
@theme {
  --color-nocturnal-expedition: #004759;
  --color-nocturnal-expedition-50: #e7f9ff;
  --color-nocturnal-expedition-100: #cff2ff;
  --color-nocturnal-expedition-200: #b4e0f0;
  --color-nocturnal-expedition-300: #97c9db;
  --color-nocturnal-expedition-400: #72aabe;
  --color-nocturnal-expedition-500: #538ea2;
  --color-nocturnal-expedition-600: #397285;
  --color-nocturnal-expedition-700: #255a6b;
  --color-nocturnal-expedition-800: #004759;
  --color-nocturnal-expedition-900: #0d3642;
  --color-nocturnal-expedition-950: #05212a;
  --color-persian-mosaic: #23676e;
  --color-persian-mosaic-50: #defcff;
  --color-persian-mosaic-100: #ccf4f8;
  --color-persian-mosaic-200: #b3e3e8;
  --color-persian-mosaic-300: #98cfd5;
  --color-persian-mosaic-400: #74b1b8;
  --color-persian-mosaic-500: #56979e;
  --color-persian-mosaic-600: #3c7d84;
  --color-persian-mosaic-700: #23676e;
  --color-persian-mosaic-800: #175157;
  --color-persian-mosaic-900: #0b3f44;
  --color-persian-mosaic-950: #03282b;
  --color-cinnapink: #ad606c;
  --color-cinnapink-50: #ffeef0;
  --color-cinnapink-100: #ffdde1;
  --color-cinnapink-200: #ffbdc5;
  --color-cinnapink-300: #eba1ab;
  --color-cinnapink-400: #cc7d89;
  --color-cinnapink-500: #ad606c;
  --color-cinnapink-600: #914955;
  --color-cinnapink-700: #773742;
  --color-cinnapink-800: #602933;
  --color-cinnapink-900: #4d1e27;
  --color-cinnapink-950: #331117;
  --color-rosetti: #cd95a0;
  --color-rosetti-50: #fff4f6;
  --color-rosetti-100: #ffe7eb;
  --color-rosetti-200: #f9ced6;
  --color-rosetti-300: #e7b7c0;
  --color-rosetti-400: #cd95a0;
  --color-rosetti-500: #af7984;
  --color-rosetti-600: #915e69;
  --color-rosetti-700: #764852;
  --color-rosetti-800: #5e363f;
  --color-rosetti-900: #4a282f;
  --color-rosetti-950: #2f171c;
  --color-macadamia: #e5caac;
  --color-macadamia-50: #fdecdb;
  --color-macadamia-100: #f3e1cd;
  --color-macadamia-200: #e5caac;
  --color-macadamia-300: #cdb69c;
  --color-macadamia-400: #b0977c;
  --color-macadamia-500: #967d61;
  --color-macadamia-600: #7c654a;
  --color-macadamia-700: #655037;
  --color-macadamia-800: #513e29;
  --color-macadamia-900: #3f301d;
  --color-macadamia-950: #281d10;
  --color-fatback: #fff7ee;
  --color-fatback-50: #fff7ee;
  --color-fatback-100: #f2ede8;
  --color-fatback-200: #ded9d2;
  --color-fatback-300: #c8c1ba;
  --color-fatback-400: #a8a199;
  --color-fatback-500: #8c857d;
  --color-fatback-600: #716b63;
  --color-fatback-700: #5a544d;
  --color-fatback-800: #47413b;
  --color-fatback-900: #36322d;
  --color-fatback-950: #221f1b;
}

Similar palettes