Coca Mocha to Black Power color palette

C0A096Coca Mocha 926C50Leather D9CFB7Berber 2F1E1AVelvet Black 614B35Black Power

About this palette

Coca Mocha to Black Power is a 5-color muted, warm, vintage palette: #C0A096 (Coca Mocha), #926C50 (Leather), #D9CFB7 (Berber), #2F1E1A (Velvet Black), #614B35 (Black Power). It mixes red, brown, gray tones and feels warm overall. The strongest text pairing is #D9CFB7 on #2F1E1A with a contrast ratio of 10.26:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Coca Mocha	rgb(192, 160, 150)	hsl(14, 25%, 67%)
Leather	rgb(146, 108, 80)	hsl(25, 29%, 44%)
Berber	rgb(217, 207, 183)	hsl(42, 31%, 78%)
Velvet Black	rgb(47, 30, 26)	hsl(11, 29%, 14%)
Black Power	rgb(97, 75, 53)	hsl(30, 29%, 29%)

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.

Aa10.26:1 Very good#D9CFB7 on #2F1E1A
Aa10.26:1 Very good#2F1E1A on #D9CFB7
Aa6.59:1 Good#C0A096 on #2F1E1A
Aa6.59:1 Good#2F1E1A on #C0A096
Aa5.28:1 Good#D9CFB7 on #614B35
Aa5.28:1 Good#614B35 on #D9CFB7
Aa3.39:1 Poor#C0A096 on #614B35
Aa3.39:1 Poor#614B35 on #C0A096

Color blindness preview

CSS variables

/* Coca Mocha to Black Power — https://swatchly.xyz/palette/c0a096-926c50-d9cfb7-2f1e1a-614b35 */
:root {
  --coca-mocha: #c0a096;
  --leather: #926c50;
  --berber: #d9cfb7;
  --velvet-black: #2f1e1a;
  --black-power: #614b35;
}

Tailwind CSS v4

/* Coca Mocha to Black Power — https://swatchly.xyz/palette/c0a096-926c50-d9cfb7-2f1e1a-614b35 */
@theme {
  --color-coca-mocha: #c0a096;
  --color-coca-mocha-50: #fff5f2;
  --color-coca-mocha-100: #feeae3;
  --color-coca-mocha-200: #eed6cf;
  --color-coca-mocha-300: #dbc0b7;
  --color-coca-mocha-400: #c0a096;
  --color-coca-mocha-500: #a2847a;
  --color-coca-mocha-600: #85685f;
  --color-coca-mocha-700: #6c5149;
  --color-coca-mocha-800: #553e37;
  --color-coca-mocha-900: #422e28;
  --color-coca-mocha-950: #291b17;
  --color-leather: #926c50;
  --color-leather-50: #fff2ea;
  --color-leather-100: #ffe8d8;
  --color-leather-200: #f3d4be;
  --color-leather-300: #e1bea5;
  --color-leather-400: #c69f84;
  --color-leather-500: #ac8569;
  --color-leather-600: #926c50;
  --color-leather-700: #77543a;
  --color-leather-800: #5f402a;
  --color-leather-900: #4a301d;
  --color-leather-950: #301d0f;
  --color-berber: #d9cfb7;
  --color-berber-50: #f5efe1;
  --color-berber-100: #ebe4d4;
  --color-berber-200: #d9cfb7;
  --color-berber-300: #c3baa5;
  --color-berber-400: #a59c86;
  --color-berber-500: #8b826c;
  --color-berber-600: #726954;
  --color-berber-700: #5b5340;
  --color-berber-800: #494231;
  --color-berber-900: #383224;
  --color-berber-950: #231f15;
  --color-velvet-black: #2f1e1a;
  --color-velvet-black-50: #fff2ef;
  --color-velvet-black-100: #f6e7e4;
  --color-velvet-black-200: #e5d3cf;
  --color-velvet-black-300: #d0bcb7;
  --color-velvet-black-400: #b29c97;
  --color-velvet-black-500: #97817c;
  --color-velvet-black-600: #7c6863;
  --color-velvet-black-700: #65524e;
  --color-velvet-black-800: #51413d;
  --color-velvet-black-900: #40322f;
  --color-velvet-black-950: #2f1e1a;
  --color-black-power: #614b35;
  --color-black-power-50: #fff3e7;
  --color-black-power-100: #f9e8d8;
  --color-black-power-200: #e6d3c0;
  --color-black-power-300: #d1baa5;
  --color-black-power-400: #b29a82;
  --color-black-power-500: #957d66;
  --color-black-power-600: #79624c;
  --color-black-power-700: #614b35;
  --color-black-power-800: #4b3a29;
  --color-black-power-900: #3b2c1e;
  --color-black-power-950: #251b10;
}