Start generating

Coral Kiss to Moelleux au Chocolat color palette

FFDFCCCoral Kiss3B1D00Medium RoastFF9C60Papaya8C552DPrecious CopperB97C59Silken Chocolate562F0AMoelleux au Chocolat
Open in generator Export PNG, PDF, ASE…

About this palette

Coral Kiss to Moelleux au Chocolat is a 6-color warm, earthy, vintage, monochromatic palette: #FFDFCC (Coral Kiss), #3B1D00 (Medium Roast), #FF9C60 (Papaya), #8C552D (Precious Copper), #B97C59 (Silken Chocolate), #562F0A (Moelleux au Chocolat). It mixes orange, brown tones and feels warm overall. The strongest text pairing is #FFDFCC on #3B1D00 with a contrast ratio of 12.25:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Coral Kissrgb(255, 223, 204)hsl(22, 100%, 90%)
Medium Roastrgb(59, 29, 0)hsl(29, 100%, 12%)
Papayargb(255, 156, 96)hsl(23, 100%, 69%)
Precious Copperrgb(140, 85, 45)hsl(25, 51%, 36%)
Silken Chocolatergb(185, 124, 89)hsl(22, 41%, 54%)
Moelleux au Chocolatrgb(86, 47, 10)hsl(29, 79%, 19%)

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.

  • Aa12.25:1 Super#FFDFCC on #3B1D00
  • Aa12.25:1 Super#3B1D00 on #FFDFCC
  • Aa9.23:1 Very good#FFDFCC on #562F0A
  • Aa9.23:1 Very good#562F0A on #FFDFCC
  • Aa7.47:1 Very good#3B1D00 on #FF9C60
  • Aa7.47:1 Very good#FF9C60 on #3B1D00
  • Aa5.63:1 Good#FF9C60 on #562F0A
  • Aa5.63:1 Good#562F0A on #FF9C60

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Coral Kiss to Moelleux au Chocolat — https://swatchly.xyz/palette/ffdfcc-3b1d00-ff9c60-8c552d-b97c59-562f0a */
:root {
  --coral-kiss: #ffdfcc;
  --medium-roast: #3b1d00;
  --papaya: #ff9c60;
  --precious-copper: #8c552d;
  --silken-chocolate: #b97c59;
  --moelleux-au-chocolat: #562f0a;
}

Tailwind CSS v4

/* Coral Kiss to Moelleux au Chocolat — https://swatchly.xyz/palette/ffdfcc-3b1d00-ff9c60-8c552d-b97c59-562f0a */
@theme {
  --color-coral-kiss: #ffdfcc;
  --color-coral-kiss-50: #ffede2;
  --color-coral-kiss-100: #ffdfcc;
  --color-coral-kiss-200: #e6cec0;
  --color-coral-kiss-300: #d2b8a8;
  --color-coral-kiss-400: #b59987;
  --color-coral-kiss-500: #9b7e6d;
  --color-coral-kiss-600: #806554;
  --color-coral-kiss-700: #684f40;
  --color-coral-kiss-800: #523d30;
  --color-coral-kiss-900: #402e23;
  --color-coral-kiss-950: #291c14;
  --color-medium-roast: #3b1d00;
  --color-medium-roast-50: #fff3e9;
  --color-medium-roast-100: #ffe6d2;
  --color-medium-roast-200: #efd1ba;
  --color-medium-roast-300: #dbba9f;
  --color-medium-roast-400: #be997c;
  --color-medium-roast-500: #a47f61;
  --color-medium-roast-600: #896649;
  --color-medium-roast-700: #715137;
  --color-medium-roast-800: #5d4028;
  --color-medium-roast-900: #4b321d;
  --color-medium-roast-950: #3b1d00;
  --color-papaya: #ff9c60;
  --color-papaya-50: #ffece2;
  --color-papaya-100: #ffddcb;
  --color-papaya-200: #ffc09d;
  --color-papaya-300: #ff9c60;
  --color-papaya-400: #dc7f44;
  --color-papaya-500: #c16423;
  --color-papaya-600: #a34b00;
  --color-papaya-700: #833b00;
  --color-papaya-800: #692e00;
  --color-papaya-900: #532300;
  --color-papaya-950: #361400;
  --color-precious-copper: #8c552d;
  --color-precious-copper-50: #fff2ea;
  --color-precious-copper-100: #ffe4d2;
  --color-precious-copper-200: #f9c9aa;
  --color-precious-copper-300: #e6b08c;
  --color-precious-copper-400: #c78d66;
  --color-precious-copper-500: #aa7048;
  --color-precious-copper-600: #8c552d;
  --color-precious-copper-700: #71421e;
  --color-precious-copper-800: #5b3212;
  --color-precious-copper-900: #48250a;
  --color-precious-copper-950: #2f1604;
  --color-silken-chocolate: #b97c59;
  --color-silken-chocolate-50: #fff4ee;
  --color-silken-chocolate-100: #ffe8dc;
  --color-silken-chocolate-200: #ffcfb5;
  --color-silken-chocolate-300: #eeb89a;
  --color-silken-chocolate-400: #d39776;
  --color-silken-chocolate-500: #b97c59;
  --color-silken-chocolate-600: #9b613f;
  --color-silken-chocolate-700: #7f4a2a;
  --color-silken-chocolate-800: #66371b;
  --color-silken-chocolate-900: #502910;
  --color-silken-chocolate-950: #331806;
  --color-moelleux-au-chocolat: #562f0a;
  --color-moelleux-au-chocolat-50: #fff3e9;
  --color-moelleux-au-chocolat-100: #ffe6d3;
  --color-moelleux-au-chocolat-200: #f4cfb4;
  --color-moelleux-au-chocolat-300: #e1b899;
  --color-moelleux-au-chocolat-400: #c59976;
  --color-moelleux-au-chocolat-500: #ab7e5b;
  --color-moelleux-au-chocolat-600: #906543;
  --color-moelleux-au-chocolat-700: #785031;
  --color-moelleux-au-chocolat-800: #633f23;
  --color-moelleux-au-chocolat-900: #562f0a;
  --color-moelleux-au-chocolat-950: #351f0c;
}

Similar palettes