Velvet Black to Liver Color Palette

About this palette

Velvet Black to Liver is a 5-color muted palette: #2C201D (Velvet Black), #BDA198 (Coca Mocha), #8E7570 (Moon Rock), #F9E3DD (Pearly), #6B4C46 (Liver). It mixes gray, red, white tones and feels warm overall. The strongest text pairing is #2C201D on #F9E3DD with a contrast ratio of 12.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Velvet Black	rgb(44, 32, 29)	hsl(12, 21%, 14%)
Coca Mocha	rgb(189, 161, 152)	hsl(15, 22%, 67%)
Moon Rock	rgb(142, 117, 112)	hsl(10, 12%, 50%)
Pearly	rgb(249, 227, 221)	hsl(13, 70%, 92%)
Liver	rgb(107, 76, 70)	hsl(10, 21%, 35%)

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.81:1 Super#2C201D on #F9E3DD
Aa12.81:1 Super#F9E3DD on #2C201D
Aa6.55:1 Good#2C201D on #BDA198
Aa6.55:1 Good#BDA198 on #2C201D
Aa6.21:1 Good#F9E3DD on #6B4C46
Aa6.21:1 Good#6B4C46 on #F9E3DD
Aa3.70:1 Poor#2C201D on #8E7570
Aa3.70:1 Poor#8E7570 on #2C201D

Color blindness preview

CSS variables

/* Velvet Black to Liver — https://swatchly.xyz/palette/2c201d-bda198-8e7570-f9e3dd-6b4c46 */
:root {
  --velvet-black: #2c201d;
  --coca-mocha: #bda198;
  --moon-rock: #8e7570;
  --pearly: #f9e3dd;
  --liver: #6b4c46;
}

Tailwind CSS v4

/* Velvet Black to Liver — https://swatchly.xyz/palette/2c201d-bda198-8e7570-f9e3dd-6b4c46 */
@theme {
  --color-velvet-black: #2c201d;
  --color-velvet-black-50: #fcf3f0;
  --color-velvet-black-100: #f3e8e6;
  --color-velvet-black-200: #e1d4d1;
  --color-velvet-black-300: #cbbdba;
  --color-velvet-black-400: #ad9e9a;
  --color-velvet-black-500: #92837f;
  --color-velvet-black-600: #786a66;
  --color-velvet-black-700: #615451;
  --color-velvet-black-800: #4e423f;
  --color-velvet-black-900: #3e3431;
  --color-velvet-black-950: #2c201d;
  --color-coca-mocha: #bda198;
  --color-coca-mocha-50: #fff5f2;
  --color-coca-mocha-100: #fceae5;
  --color-coca-mocha-200: #ecd7d0;
  --color-coca-mocha-300: #d9c1b9;
  --color-coca-mocha-400: #bda198;
  --color-coca-mocha-500: #9f857c;
  --color-coca-mocha-600: #836961;
  --color-coca-mocha-700: #69524b;
  --color-coca-mocha-800: #533f38;
  --color-coca-mocha-900: #402f2a;
  --color-coca-mocha-950: #281c18;
  --color-moon-rock: #8e7570;
  --color-moon-rock-50: #ffefec;
  --color-moon-rock-100: #f5e3df;
  --color-moon-rock-200: #e2ccc8;
  --color-moon-rock-300: #cbb3ae;
  --color-moon-rock-400: #ab928d;
  --color-moon-rock-500: #8e7570;
  --color-moon-rock-600: #745d59;
  --color-moon-rock-700: #5e4945;
  --color-moon-rock-800: #4b3935;
  --color-moon-rock-900: #3b2c29;
  --color-moon-rock-950: #261b19;
  --color-pearly: #f9e3dd;
  --color-pearly-50: #fcf0ec;
  --color-pearly-100: #f9e3dd;
  --color-pearly-200: #e2d1cd;
  --color-pearly-300: #cdbbb6;
  --color-pearly-400: #af9b96;
  --color-pearly-500: #94807b;
  --color-pearly-600: #796762;
  --color-pearly-700: #62514c;
  --color-pearly-800: #4d3f3b;
  --color-pearly-900: #3c302c;
  --color-pearly-950: #261d1b;
  --color-liver: #6b4c46;
  --color-liver-50: #fff2ef;
  --color-liver-100: #fde5e0;
  --color-liver-200: #ecd0cb;
  --color-liver-300: #d8b8b2;
  --color-liver-400: #ba9891;
  --color-liver-500: #9e7d76;
  --color-liver-600: #82635c;
  --color-liver-700: #6b4c46;
  --color-liver-800: #543b36;
  --color-liver-900: #422d28;
  --color-liver-950: #2a1b18;
}