Chocolate Velvet to Khaki color palette

827253Chocolate Velvet DECB9FPrairie Land 6B5016Ayahuasca Vine 221C13Burnt Coffee C0B18FKhaki

About this palette

Chocolate Velvet to Khaki is a 5-color muted, warm, earthy, vintage, monochromatic palette: #827253 (Chocolate Velvet), #DECB9F (Prairie Land), #6B5016 (Ayahuasca Vine), #221C13 (Burnt Coffee), #C0B18F (Khaki). It mixes yellow, brown, gray tones and feels warm overall. The strongest text pairing is #DECB9F on #221C13 with a contrast ratio of 10.57:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chocolate Velvet	rgb(130, 114, 83)	hsl(40, 22%, 42%)
Prairie Land	rgb(222, 203, 159)	hsl(42, 49%, 75%)
Ayahuasca Vine	rgb(107, 80, 22)	hsl(41, 66%, 25%)
Burnt Coffee	rgb(34, 28, 19)	hsl(36, 28%, 10%)
Khaki	rgb(192, 177, 143)	hsl(42, 28%, 66%)

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.57:1 Very good#DECB9F on #221C13
Aa10.57:1 Very good#221C13 on #DECB9F
Aa7.98:1 Very good#221C13 on #C0B18F
Aa7.98:1 Very good#C0B18F on #221C13
Aa4.72:1 Good#DECB9F on #6B5016
Aa4.72:1 Good#6B5016 on #DECB9F
Aa3.60:1 Poor#827253 on #221C13
Aa3.60:1 Poor#221C13 on #827253

Color blindness preview

CSS variables

/* Chocolate Velvet to Khaki — https://swatchly.xyz/palette/827253-decb9f-6b5016-221c13-c0b18f */
:root {
  --chocolate-velvet: #827253;
  --prairie-land: #decb9f;
  --ayahuasca-vine: #6b5016;
  --burnt-coffee: #221c13;
  --khaki: #c0b18f;
}

Tailwind CSS v4

/* Chocolate Velvet to Khaki — https://swatchly.xyz/palette/827253-decb9f-6b5016-221c13-c0b18f */
@theme {
  --color-chocolate-velvet: #827253;
  --color-chocolate-velvet-50: #fef4e1;
  --color-chocolate-velvet-100: #f6ecd7;
  --color-chocolate-velvet-200: #e6d9c1;
  --color-chocolate-velvet-300: #d2c4a8;
  --color-chocolate-velvet-400: #b6a587;
  --color-chocolate-velvet-500: #9c8b6c;
  --color-chocolate-velvet-600: #827253;
  --color-chocolate-velvet-700: #695a3d;
  --color-chocolate-velvet-800: #52462c;
  --color-chocolate-velvet-900: #40351f;
  --color-chocolate-velvet-950: #282011;
  --color-prairie-land: #decb9f;
  --color-prairie-land-50: #f8edd2;
  --color-prairie-land-100: #eee1c3;
  --color-prairie-land-200: #decb9f;
  --color-prairie-land-300: #c7b790;
  --color-prairie-land-400: #ab9970;
  --color-prairie-land-500: #917f56;
  --color-prairie-land-600: #77673f;
  --color-prairie-land-700: #61522d;
  --color-prairie-land-800: #4e4120;
  --color-prairie-land-900: #3d3115;
  --color-prairie-land-950: #261e0a;
  --color-ayahuasca-vine: #6b5016;
  --color-ayahuasca-vine-50: #fff4e0;
  --color-ayahuasca-vine-100: #fce9c6;
  --color-ayahuasca-vine-200: #ebd4ab;
  --color-ayahuasca-vine-300: #d7bd8e;
  --color-ayahuasca-vine-400: #b99d68;
  --color-ayahuasca-vine-500: #9e814a;
  --color-ayahuasca-vine-600: #826731;
  --color-ayahuasca-vine-700: #6b5016;
  --color-ayahuasca-vine-800: #543e10;
  --color-ayahuasca-vine-900: #422f07;
  --color-ayahuasca-vine-950: #2a1d02;
  --color-burnt-coffee: #221c13;
  --color-burnt-coffee-50: #f9f4ee;
  --color-burnt-coffee-100: #f0eae3;
  --color-burnt-coffee-200: #ddd6cd;
  --color-burnt-coffee-300: #c7c0b6;
  --color-burnt-coffee-400: #a8a095;
  --color-burnt-coffee-500: #8c8479;
  --color-burnt-coffee-600: #716a5f;
  --color-burnt-coffee-700: #595349;
  --color-burnt-coffee-800: #454038;
  --color-burnt-coffee-900: #353029;
  --color-burnt-coffee-950: #221c13;
  --color-khaki: #c0b18f;
  --color-khaki-50: #f6edd8;
  --color-khaki-100: #ebe0c8;
  --color-khaki-200: #d6caae;
  --color-khaki-300: #c0b18f;
  --color-khaki-400: #a39474;
  --color-khaki-500: #8a7c5b;
  --color-khaki-600: #716445;
  --color-khaki-700: #5c5034;
  --color-khaki-800: #4a3f27;
  --color-khaki-900: #3b321c;
  --color-khaki-950: #251e0f;
}