No Way Rosé to Moelleux au Chocolat Color Palette

About this palette

No Way Rosé to Moelleux au Chocolat is a 4-color warm, vintage, gradient palette: #F6AD9E (No Way Rosé), #9A8E28 (Gecko), #A2523E (Truffle Trouble), #502E00 (Moelleux au Chocolat). It mixes pink, yellow, red, brown tones and feels warm overall. The strongest text pairing is #F6AD9E on #502E00 with a contrast ratio of 6.58:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
No Way Rosé	rgb(246, 173, 158)	hsl(10, 83%, 79%)
Gecko	rgb(154, 142, 40)	hsl(54, 59%, 38%)
Truffle Trouble	rgb(162, 82, 62)	hsl(12, 45%, 44%)
Moelleux au Chocolat	rgb(80, 46, 0)	hsl(34, 100%, 16%)

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.58:1 Good#F6AD9E on #502E00
Aa6.58:1 Good#502E00 on #F6AD9E
Aa3.62:1 Poor#9A8E28 on #502E00
Aa3.62:1 Poor#502E00 on #9A8E28

Color blindness preview

CSS variables

/* No Way Rosé to Moelleux au Chocolat — https://swatchly.xyz/palette/f6ad9e-9a8e28-a2523e-502e00 */
:root {
  --no-way-ros: #f6ad9e;
  --gecko: #9a8e28;
  --truffle-trouble: #a2523e;
  --moelleux-au-chocolat: #502e00;
}

Tailwind CSS v4

/* No Way Rosé to Moelleux au Chocolat — https://swatchly.xyz/palette/f6ad9e-9a8e28-a2523e-502e00 */
@theme {
  --color-no-way-ros: #f6ad9e;
  --color-no-way-ros-50: #fff2f0;
  --color-no-way-ros-100: #ffe5e0;
  --color-no-way-ros-200: #ffcabf;
  --color-no-way-ros-300: #f6ad9e;
  --color-no-way-ros-400: #d28f81;
  --color-no-way-ros-500: #b67265;
  --color-no-way-ros-600: #98584c;
  --color-no-way-ros-700: #7d4338;
  --color-no-way-ros-800: #643228;
  --color-no-way-ros-900: #4f251d;
  --color-no-way-ros-950: #34150f;
  --color-gecko: #9a8e28;
  --color-gecko-50: #fef9c7;
  --color-gecko-100: #f6f0b8;
  --color-gecko-200: #e5dd9a;
  --color-gecko-300: #d1c87a;
  --color-gecko-400: #b4a94e;
  --color-gecko-500: #9a8e28;
  --color-gecko-600: #7e7200;
  --color-gecko-700: #645a00;
  --color-gecko-800: #4e4600;
  --color-gecko-900: #3b3500;
  --color-gecko-950: #252100;
  --color-truffle-trouble: #a2523e;
  --color-truffle-trouble-50: #fff2ee;
  --color-truffle-trouble-100: #ffe5de;
  --color-truffle-trouble-200: #ffc9bb;
  --color-truffle-trouble-300: #f8ab98;
  --color-truffle-trouble-400: #dc8974;
  --color-truffle-trouble-500: #bf6d58;
  --color-truffle-trouble-600: #a2523e;
  --color-truffle-trouble-700: #853d2c;
  --color-truffle-trouble-800: #6b2d1d;
  --color-truffle-trouble-900: #552013;
  --color-truffle-trouble-950: #381208;
  --color-moelleux-au-chocolat: #502e00;
  --color-moelleux-au-chocolat-50: #fff3e7;
  --color-moelleux-au-chocolat-100: #ffe6ce;
  --color-moelleux-au-chocolat-200: #f1d1b2;
  --color-moelleux-au-chocolat-300: #ddba96;
  --color-moelleux-au-chocolat-400: #c19a72;
  --color-moelleux-au-chocolat-500: #a67f56;
  --color-moelleux-au-chocolat-600: #8b663e;
  --color-moelleux-au-chocolat-700: #72502b;
  --color-moelleux-au-chocolat-800: #5d3f1d;
  --color-moelleux-au-chocolat-900: #502e00;
  --color-moelleux-au-chocolat-950: #311e08;
}