Brown to Coffee Whip color palette

6F3B00Brown 679110Asparagus Sultan 413700Dark Olive 917000Glazed Chestnut C2D55EGlow Worm DAA254Coffee Whip

Open in generator Export PNG, PDF, ASE…

About this palette

Brown to Coffee Whip is a 6-color warm, earthy palette: #6F3B00 (Brown), #679110 (Asparagus Sultan), #413700 (Dark Olive), #917000 (Glazed Chestnut), #C2D55E (Glow Worm), #DAA254 (Coffee Whip). It mixes brown, green, yellow, orange tones and feels warm overall. The strongest text pairing is #413700 on #C2D55E with a contrast ratio of 7.32:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Brown	rgb(111, 59, 0)	hsl(32, 100%, 22%)
Asparagus Sultan	rgb(103, 145, 16)	hsl(80, 80%, 32%)
Dark Olive	rgb(65, 55, 0)	hsl(51, 100%, 13%)
Glazed Chestnut	rgb(145, 112, 0)	hsl(46, 100%, 28%)
Glow Worm	rgb(194, 213, 94)	hsl(70, 59%, 60%)
Coffee Whip	rgb(218, 162, 84)	hsl(35, 64%, 59%)

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.

Aa7.32:1 Very good#413700 on #C2D55E
Aa7.32:1 Very good#C2D55E on #413700
Aa5.64:1 Good#6F3B00 on #C2D55E
Aa5.64:1 Good#C2D55E on #6F3B00
Aa5.24:1 Good#413700 on #DAA254
Aa5.24:1 Good#DAA254 on #413700
Aa4.03:1 Poor#6F3B00 on #DAA254
Aa4.03:1 Poor#DAA254 on #6F3B00

Color blindness preview

CSS variables

/* Brown to Coffee Whip — https://swatchly.xyz/palette/6f3b00-679110-413700-917000-c2d55e-daa254 */
:root {
  --brown: #6f3b00;
  --asparagus-sultan: #679110;
  --dark-olive: #413700;
  --glazed-chestnut: #917000;
  --glow-worm: #c2d55e;
  --coffee-whip: #daa254;
}

Tailwind CSS v4

/* Brown to Coffee Whip — https://swatchly.xyz/palette/6f3b00-679110-413700-917000-c2d55e-daa254 */
@theme {
  --color-brown: #6f3b00;
  --color-brown-50: #fff3e9;
  --color-brown-100: #ffe6d3;
  --color-brown-200: #fbcda9;
  --color-brown-300: #eab68d;
  --color-brown-400: #cf9769;
  --color-brown-500: #b57c4c;
  --color-brown-600: #9a6333;
  --color-brown-700: #814e20;
  --color-brown-800: #6f3b00;
  --color-brown-900: #552e07;
  --color-brown-950: #381c01;
  --color-asparagus-sultan: #679110;
  --color-asparagus-sultan-50: #e5ffc6;
  --color-asparagus-sultan-100: #d7f6b1;
  --color-asparagus-sultan-200: #bfe390;
  --color-asparagus-sultan-300: #a5cd6d;
  --color-asparagus-sultan-400: #83ae3e;
  --color-asparagus-sultan-500: #679110;
  --color-asparagus-sultan-600: #517500;
  --color-asparagus-sultan-700: #405d00;
  --color-asparagus-sultan-800: #314900;
  --color-asparagus-sultan-900: #253900;
  --color-asparagus-sultan-950: #162400;
  --color-dark-olive: #413700;
  --color-dark-olive-50: #fcf6d9;
  --color-dark-olive-100: #f3eccc;
  --color-dark-olive-200: #e0d8b2;
  --color-dark-olive-300: #cbc296;
  --color-dark-olive-400: #ada373;
  --color-dark-olive-500: #938957;
  --color-dark-olive-600: #796f3e;
  --color-dark-olive-700: #62592b;
  --color-dark-olive-800: #4f461e;
  --color-dark-olive-900: #413700;
  --color-dark-olive-950: #282308;
  --color-glazed-chestnut: #917000;
  --color-glazed-chestnut-50: #fff4db;
  --color-glazed-chestnut-100: #ffebbc;
  --color-glazed-chestnut-200: #f2d99c;
  --color-glazed-chestnut-300: #e0c37c;
  --color-glazed-chestnut-400: #c4a452;
  --color-glazed-chestnut-500: #ab8a2e;
  --color-glazed-chestnut-600: #917000;
  --color-glazed-chestnut-700: #735900;
  --color-glazed-chestnut-800: #5a4500;
  --color-glazed-chestnut-900: #463400;
  --color-glazed-chestnut-950: #2c2000;
  --color-glow-worm: #c2d55e;
  --color-glow-worm-50: #f6ffd4;
  --color-glow-worm-100: #ecf9b8;
  --color-glow-worm-200: #d9e899;
  --color-glow-worm-300: #c2d55e;
  --color-glow-worm-400: #a2b343;
  --color-glow-worm-500: #859609;
  --color-glow-worm-600: #6b7800;
  --color-glow-worm-700: #545f00;
  --color-glow-worm-800: #404900;
  --color-glow-worm-900: #303700;
  --color-glow-worm-950: #1d2200;
  --color-coffee-whip: #daa254;
  --color-coffee-whip-50: #fff8f0;
  --color-coffee-whip-100: #ffefdb;
  --color-coffee-whip-200: #ffd9a9;
  --color-coffee-whip-300: #f1c386;
  --color-coffee-whip-400: #daa254;
  --color-coffee-whip-500: #ba8435;
  --color-coffee-whip-600: #9b670a;
  --color-coffee-whip-700: #7c5000;
  --color-coffee-whip-800: #603e00;
  --color-coffee-whip-900: #4a2e00;
  --color-coffee-whip-950: #2e1b00;
}