Start generating

Air-Kiss to Smoked Black Coffee color palette

F9DAD3Air-KissD9B0AABorlotti BeanB08982Nougat895E5AChocolate Bliss6F4940Cappuccino3E2F2CSmoked Black Coffee
Open in generator Export PNG, PDF, ASE…

About this palette

Air-Kiss to Smoked Black Coffee is a 6-color muted, warm, vintage, gradient palette: #F9DAD3 (Air-Kiss), #D9B0AA (Borlotti Bean), #B08982 (Nougat), #895E5A (Chocolate Bliss), #6F4940 (Cappuccino), #3E2F2C (Smoked Black Coffee). It mixes pink, red, gray tones and feels warm overall. The strongest text pairing is #F9DAD3 on #3E2F2C with a contrast ratio of 9.71:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Air-Kissrgb(249, 218, 211)hsl(11, 76%, 90%)
Borlotti Beanrgb(217, 176, 170)hsl(8, 38%, 76%)
Nougatrgb(176, 137, 130)hsl(9, 23%, 60%)
Chocolate Blissrgb(137, 94, 90)hsl(5, 21%, 45%)
Cappuccinorgb(111, 73, 64)hsl(11, 27%, 34%)
Smoked Black Coffeergb(62, 47, 44)hsl(10, 17%, 21%)

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.71:1 Very good#F9DAD3 on #3E2F2C
  • Aa9.71:1 Very good#3E2F2C on #F9DAD3
  • Aa6.52:1 Good#D9B0AA on #3E2F2C
  • Aa6.52:1 Good#3E2F2C on #D9B0AA
  • Aa5.92:1 Good#F9DAD3 on #6F4940
  • Aa5.92:1 Good#6F4940 on #F9DAD3
  • Aa4.20:1 Poor#F9DAD3 on #895E5A
  • Aa4.20:1 Poor#895E5A on #F9DAD3

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Air-Kiss to Smoked Black Coffee — https://swatchly.xyz/palette/f9dad3-d9b0aa-b08982-895e5a-6f4940-3e2f2c */
:root {
  --air-kiss: #f9dad3;
  --borlotti-bean: #d9b0aa;
  --nougat: #b08982;
  --chocolate-bliss: #895e5a;
  --cappuccino: #6f4940;
  --smoked-black-coffee: #3e2f2c;
}

Tailwind CSS v4

/* Air-Kiss to Smoked Black Coffee — https://swatchly.xyz/palette/f9dad3-d9b0aa-b08982-895e5a-6f4940-3e2f2c */
@theme {
  --color-air-kiss: #f9dad3;
  --color-air-kiss-50: #fce9e4;
  --color-air-kiss-100: #f9dad3;
  --color-air-kiss-200: #e2cac4;
  --color-air-kiss-300: #ceb4ae;
  --color-air-kiss-400: #b29690;
  --color-air-kiss-500: #987c76;
  --color-air-kiss-600: #7e635e;
  --color-air-kiss-700: #664f4a;
  --color-air-kiss-800: #513d38;
  --color-air-kiss-900: #3f2e2a;
  --color-air-kiss-950: #281c19;
  --color-borlotti-bean: #d9b0aa;
  --color-borlotti-bean-50: #ffeeeb;
  --color-borlotti-bean-100: #fce0dc;
  --color-borlotti-bean-200: #eacac5;
  --color-borlotti-bean-300: #d9b0aa;
  --color-borlotti-bean-400: #b9928d;
  --color-borlotti-bean-500: #9e7872;
  --color-borlotti-bean-600: #835f5a;
  --color-borlotti-bean-700: #6a4a46;
  --color-borlotti-bean-800: #553935;
  --color-borlotti-bean-900: #442c29;
  --color-borlotti-bean-950: #2b1a18;
  --color-nougat: #b08982;
  --color-nougat-50: #ffebe7;
  --color-nougat-100: #f9dcd7;
  --color-nougat-200: #e6c5bf;
  --color-nougat-300: #d0aba4;
  --color-nougat-400: #b08982;
  --color-nougat-500: #96716a;
  --color-nougat-600: #7c5953;
  --color-nougat-700: #654641;
  --color-nougat-800: #523732;
  --color-nougat-900: #412a26;
  --color-nougat-950: #2b1a17;
  --color-chocolate-bliss: #895e5a;
  --color-chocolate-bliss-50: #fff2f0;
  --color-chocolate-bliss-100: #ffe4e1;
  --color-chocolate-bliss-200: #f2cdc9;
  --color-chocolate-bliss-300: #dfb5b0;
  --color-chocolate-bliss-400: #c19490;
  --color-chocolate-bliss-500: #a57874;
  --color-chocolate-bliss-600: #895e5a;
  --color-chocolate-bliss-700: #6f4946;
  --color-chocolate-bliss-800: #593835;
  --color-chocolate-bliss-900: #462a27;
  --color-chocolate-bliss-950: #2d1917;
  --color-cappuccino: #6f4940;
  --color-cappuccino-50: #fff2ef;
  --color-cappuccino-100: #ffe4de;
  --color-cappuccino-200: #f1cec6;
  --color-cappuccino-300: #ddb6ad;
  --color-cappuccino-400: #bf968c;
  --color-cappuccino-500: #a37a70;
  --color-cappuccino-600: #876056;
  --color-cappuccino-700: #6f4940;
  --color-cappuccino-800: #573931;
  --color-cappuccino-900: #442b25;
  --color-cappuccino-950: #2c1915;
  --color-smoked-black-coffee: #3e2f2c;
  --color-smoked-black-coffee-50: #fdf2f0;
  --color-smoked-black-coffee-100: #f4e8e5;
  --color-smoked-black-coffee-200: #e2d4d1;
  --color-smoked-black-coffee-300: #cdbdb9;
  --color-smoked-black-coffee-400: #af9d99;
  --color-smoked-black-coffee-500: #94827e;
  --color-smoked-black-coffee-600: #786764;
  --color-smoked-black-coffee-700: #61514e;
  --color-smoked-black-coffee-800: #4c3f3c;
  --color-smoked-black-coffee-900: #3e2f2c;
  --color-smoked-black-coffee-950: #251d1c;
}

Similar palettes