Start generating

Coca Mocha to Fatback color palette

BF9A94Coca Mocha4F3B3DMonkey IslandDFC9BCCoconut Macaroon94746CChocolate Temptation714C58Nocturne RedFFF7EEFatback
Open in generator Export PNG, PDF, ASE…

About this palette

Coca Mocha to Fatback is a 6-color muted palette: #BF9A94 (Coca Mocha), #4F3B3D (Monkey Island), #DFC9BC (Coconut Macaroon), #94746C (Chocolate Temptation), #714C58 (Nocturne Red), #FFF7EE (Fatback). It mixes red, gray, white tones and feels warm overall. The strongest text pairing is #4F3B3D on #FFF7EE with a contrast ratio of 9.77:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Coca Mochargb(191, 154, 148)hsl(8, 25%, 66%)
Monkey Islandrgb(79, 59, 61)hsl(354, 14%, 27%)
Coconut Macaroonrgb(223, 201, 188)hsl(22, 35%, 81%)
Chocolate Temptationrgb(148, 116, 108)hsl(12, 16%, 50%)
Nocturne Redrgb(113, 76, 88)hsl(341, 20%, 37%)
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.77:1 Very good#4F3B3D on #FFF7EE
  • Aa9.77:1 Very good#FFF7EE on #4F3B3D
  • Aa6.88:1 Good#714C58 on #FFF7EE
  • Aa6.88:1 Good#FFF7EE on #714C58
  • Aa6.53:1 Good#4F3B3D on #DFC9BC
  • Aa6.53:1 Good#DFC9BC on #4F3B3D
  • Aa4.59:1 Good#DFC9BC on #714C58
  • Aa4.59:1 Good#714C58 on #DFC9BC

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Coca Mocha to Fatback — https://swatchly.xyz/palette/bf9a94-4f3b3d-dfc9bc-94746c-714c58-fff7ee */
:root {
  --coca-mocha: #bf9a94;
  --monkey-island: #4f3b3d;
  --coconut-macaroon: #dfc9bc;
  --chocolate-temptation: #94746c;
  --nocturne-red: #714c58;
  --fatback: #fff7ee;
}

Tailwind CSS v4

/* Coca Mocha to Fatback — https://swatchly.xyz/palette/bf9a94-4f3b3d-dfc9bc-94746c-714c58-fff7ee */
@theme {
  --color-coca-mocha: #bf9a94;
  --color-coca-mocha-50: #fff3f1;
  --color-coca-mocha-100: #ffe6e2;
  --color-coca-mocha-200: #efd2cd;
  --color-coca-mocha-300: #dbbab5;
  --color-coca-mocha-400: #bf9a94;
  --color-coca-mocha-500: #a27e79;
  --color-coca-mocha-600: #86645f;
  --color-coca-mocha-700: #6c4e49;
  --color-coca-mocha-800: #563b37;
  --color-coca-mocha-900: #432d29;
  --color-coca-mocha-950: #2a1b18;
  --color-monkey-island: #4f3b3d;
  --color-monkey-island-50: #fff1f2;
  --color-monkey-island-100: #f7e7e8;
  --color-monkey-island-200: #e5d2d4;
  --color-monkey-island-300: #d0bbbc;
  --color-monkey-island-400: #b19a9c;
  --color-monkey-island-500: #967f81;
  --color-monkey-island-600: #7a6466;
  --color-monkey-island-700: #624e50;
  --color-monkey-island-800: #4f3b3d;
  --color-monkey-island-900: #3c2e2f;
  --color-monkey-island-950: #261b1c;
  --color-coconut-macaroon: #dfc9bc;
  --color-coconut-macaroon-50: #f9ece4;
  --color-coconut-macaroon-100: #efe0d7;
  --color-coconut-macaroon-200: #dfc9bc;
  --color-coconut-macaroon-300: #c8b5aa;
  --color-coconut-macaroon-400: #ab978b;
  --color-coconut-macaroon-500: #917d71;
  --color-coconut-macaroon-600: #776559;
  --color-coconut-macaroon-700: #615046;
  --color-coconut-macaroon-800: #4e3f36;
  --color-coconut-macaroon-900: #3c3028;
  --color-coconut-macaroon-950: #261d18;
  --color-chocolate-temptation: #94746c;
  --color-chocolate-temptation-50: #ffefec;
  --color-chocolate-temptation-100: #f9e2dc;
  --color-chocolate-temptation-200: #e7cbc4;
  --color-chocolate-temptation-300: #d1b2aa;
  --color-chocolate-temptation-400: #b19188;
  --color-chocolate-temptation-500: #94746c;
  --color-chocolate-temptation-600: #7a5c55;
  --color-chocolate-temptation-700: #634841;
  --color-chocolate-temptation-800: #4f3832;
  --color-chocolate-temptation-900: #3e2b26;
  --color-chocolate-temptation-950: #281a17;
  --color-nocturne-red: #714c58;
  --color-nocturne-red-50: #fff1f5;
  --color-nocturne-red-100: #ffe3eb;
  --color-nocturne-red-200: #efced8;
  --color-nocturne-red-300: #dcb7c2;
  --color-nocturne-red-400: #bf97a3;
  --color-nocturne-red-500: #a47b88;
  --color-nocturne-red-600: #88626e;
  --color-nocturne-red-700: #714c58;
  --color-nocturne-red-800: #593b45;
  --color-nocturne-red-900: #462c34;
  --color-nocturne-red-950: #2d1a20;
  --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