Start generating

Young at Heart to Femme Fatale color palette

CDA0A6Young at Heart607A75Camping Trip445E71Seven Seas4E4132TurtleE0CCB1Pretty PastryA3858FFemme Fatale
Open in generator Export PNG, PDF, ASE…

About this palette

Young at Heart to Femme Fatale is a 6-color muted, vintage palette: #CDA0A6 (Young at Heart), #607A75 (Camping Trip), #445E71 (Seven Seas), #4E4132 (Turtle), #E0CCB1 (Pretty Pastry), #A3858F (Femme Fatale). It mixes red, gray, blue, yellow, pink tones and feels warm overall. The strongest text pairing is #4E4132 on #E0CCB1 with a contrast ratio of 6.32:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Young at Heartrgb(205, 160, 166)hsl(352, 31%, 72%)
Camping Triprgb(96, 122, 117)hsl(168, 12%, 43%)
Seven Seasrgb(68, 94, 113)hsl(205, 25%, 35%)
Turtlergb(78, 65, 50)hsl(32, 22%, 25%)
Pretty Pastryrgb(224, 204, 177)hsl(34, 43%, 79%)
Femme Fatalergb(163, 133, 143)hsl(340, 14%, 58%)

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.32:1 Good#4E4132 on #E0CCB1
  • Aa6.32:1 Good#E0CCB1 on #4E4132
  • Aa4.36:1 Poor#445E71 on #E0CCB1
  • Aa4.36:1 Poor#E0CCB1 on #445E71
  • Aa4.32:1 Poor#CDA0A6 on #4E4132
  • Aa4.32:1 Poor#4E4132 on #CDA0A6

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Young at Heart to Femme Fatale — https://swatchly.xyz/palette/cda0a6-607a75-445e71-4e4132-e0ccb1-a3858f */
:root {
  --young-at-heart: #cda0a6;
  --camping-trip: #607a75;
  --seven-seas: #445e71;
  --turtle: #4e4132;
  --pretty-pastry: #e0ccb1;
  --femme-fatale: #a3858f;
}

Tailwind CSS v4

/* Young at Heart to Femme Fatale — https://swatchly.xyz/palette/cda0a6-607a75-445e71-4e4132-e0ccb1-a3858f */
@theme {
  --color-young-at-heart: #cda0a6;
  --color-young-at-heart-50: #fff7f8;
  --color-young-at-heart-100: #ffecee;
  --color-young-at-heart-200: #f7d6da;
  --color-young-at-heart-300: #e6c0c5;
  --color-young-at-heart-400: #cda0a6;
  --color-young-at-heart-500: #ae8389;
  --color-young-at-heart-600: #90666c;
  --color-young-at-heart-700: #744f54;
  --color-young-at-heart-800: #5c3b40;
  --color-young-at-heart-900: #472c30;
  --color-young-at-heart-950: #2c191c;
  --color-camping-trip: #607a75;
  --color-camping-trip-50: #e9f9f6;
  --color-camping-trip-100: #e0f1ed;
  --color-camping-trip-200: #cbe0db;
  --color-camping-trip-300: #b4cbc6;
  --color-camping-trip-400: #94aea8;
  --color-camping-trip-500: #79948e;
  --color-camping-trip-600: #607a75;
  --color-camping-trip-700: #49615d;
  --color-camping-trip-800: #374c48;
  --color-camping-trip-900: #293a37;
  --color-camping-trip-950: #172422;
  --color-seven-seas: #445e71;
  --color-seven-seas-50: #ecf7ff;
  --color-seven-seas-100: #dceefc;
  --color-seven-seas-200: #c6dcec;
  --color-seven-seas-300: #aec7d9;
  --color-seven-seas-400: #8ea8bd;
  --color-seven-seas-500: #738ea2;
  --color-seven-seas-600: #5a7488;
  --color-seven-seas-700: #445e71;
  --color-seven-seas-800: #344959;
  --color-seven-seas-900: #263846;
  --color-seven-seas-950: #16232d;
  --color-turtle: #4e4132;
  --color-turtle-50: #fdf4e9;
  --color-turtle-100: #f3e9de;
  --color-turtle-200: #e1d5c8;
  --color-turtle-300: #ccbfb0;
  --color-turtle-400: #ae9f8f;
  --color-turtle-500: #938474;
  --color-turtle-600: #786a5a;
  --color-turtle-700: #605446;
  --color-turtle-800: #4e4132;
  --color-turtle-900: #3b3227;
  --color-turtle-950: #251f17;
  --color-pretty-pastry: #e0ccb1;
  --color-pretty-pastry-50: #faeedd;
  --color-pretty-pastry-100: #f0e2d0;
  --color-pretty-pastry-200: #e0ccb1;
  --color-pretty-pastry-300: #c9b7a0;
  --color-pretty-pastry-400: #ac9980;
  --color-pretty-pastry-500: #927f66;
  --color-pretty-pastry-600: #78664e;
  --color-pretty-pastry-700: #61513c;
  --color-pretty-pastry-800: #4e402d;
  --color-pretty-pastry-900: #3c3120;
  --color-pretty-pastry-950: #261e12;
  --color-femme-fatale: #a3858f;
  --color-femme-fatale-50: #fff3f7;
  --color-femme-fatale-100: #fce8ef;
  --color-femme-fatale-200: #ecd5dc;
  --color-femme-fatale-300: #d9bfc7;
  --color-femme-fatale-400: #bda0a9;
  --color-femme-fatale-500: #a3858f;
  --color-femme-fatale-600: #866973;
  --color-femme-fatale-700: #6c525b;
  --color-femme-fatale-800: #553f46;
  --color-femme-fatale-900: #422f36;
  --color-femme-fatale-950: #291c21;
}

Similar palettes