Start generating

Hot Curry to Lonely Chocolate color palette

7E5E32Hot Curry664500Very Coffee011100Cosmic Bit Flip034500Woodland Grass003C27Queen of Trees460001Lonely Chocolate
Open in generator Export PNG, PDF, ASE…

About this palette

Hot Curry to Lonely Chocolate is a 6-color dark, earthy palette: #7E5E32 (Hot Curry), #664500 (Very Coffee), #011100 (Cosmic Bit Flip), #034500 (Woodland Grass), #003C27 (Queen of Trees), #460001 (Lonely Chocolate). It mixes brown, black, green tones and feels balanced overall. The strongest text pairing is #7E5E32 on #011100 with a contrast ratio of 3.27:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Hot Curryrgb(126, 94, 50)hsl(35, 43%, 35%)
Very Coffeergb(102, 69, 0)hsl(41, 100%, 20%)
Cosmic Bit Fliprgb(1, 17, 0)hsl(116, 100%, 3%)
Woodland Grassrgb(3, 69, 0)hsl(117, 100%, 14%)
Queen of Treesrgb(0, 60, 39)hsl(159, 100%, 12%)
Lonely Chocolatergb(70, 0, 1)hsl(359, 100%, 14%)

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.

  • Aa3.27:1 Poor#7E5E32 on #011100
  • Aa3.27:1 Poor#011100 on #7E5E32

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Hot Curry to Lonely Chocolate — https://swatchly.xyz/palette/7e5e32-664500-011100-034500-003c27-460001 */
:root {
  --hot-curry: #7e5e32;
  --very-coffee: #664500;
  --cosmic-bit-flip: #011100;
  --woodland-grass: #034500;
  --queen-of-trees: #003c27;
  --lonely-chocolate: #460001;
}

Tailwind CSS v4

/* Hot Curry to Lonely Chocolate — https://swatchly.xyz/palette/7e5e32-664500-011100-034500-003c27-460001 */
@theme {
  --color-hot-curry: #7e5e32;
  --color-hot-curry-50: #fff3e4;
  --color-hot-curry-100: #fde6c9;
  --color-hot-curry-200: #ebd0ad;
  --color-hot-curry-300: #d6b790;
  --color-hot-curry-400: #b7966a;
  --color-hot-curry-500: #9b794d;
  --color-hot-curry-600: #7e5e32;
  --color-hot-curry-700: #654a23;
  --color-hot-curry-800: #513916;
  --color-hot-curry-900: #402b0e;
  --color-hot-curry-950: #291a05;
  --color-very-coffee: #664500;
  --color-very-coffee-50: #fff3e2;
  --color-very-coffee-100: #ffe8c5;
  --color-very-coffee-200: #eed1a6;
  --color-very-coffee-300: #d9b886;
  --color-very-coffee-400: #ba965f;
  --color-very-coffee-500: #9c7940;
  --color-very-coffee-600: #7e5d25;
  --color-very-coffee-700: #664500;
  --color-very-coffee-800: #4f3606;
  --color-very-coffee-900: #3e2901;
  --color-very-coffee-950: #271800;
  --color-cosmic-bit-flip: #011100;
  --color-cosmic-bit-flip-50: #ebfae9;
  --color-cosmic-bit-flip-100: #e0f1dd;
  --color-cosmic-bit-flip-200: #cbdec7;
  --color-cosmic-bit-flip-300: #b2c8ae;
  --color-cosmic-bit-flip-400: #91aa8d;
  --color-cosmic-bit-flip-500: #728a6d;
  --color-cosmic-bit-flip-600: #546b51;
  --color-cosmic-bit-flip-700: #3c5039;
  --color-cosmic-bit-flip-800: #293926;
  --color-cosmic-bit-flip-900: #192517;
  --color-cosmic-bit-flip-950: #011100;
  --color-woodland-grass: #034500;
  --color-woodland-grass-50: #e1ffde;
  --color-woodland-grass-100: #d1f8cc;
  --color-woodland-grass-200: #b8e6b3;
  --color-woodland-grass-300: #9dd197;
  --color-woodland-grass-400: #7ab474;
  --color-woodland-grass-500: #5e9958;
  --color-woodland-grass-600: #457f3f;
  --color-woodland-grass-700: #31672c;
  --color-woodland-grass-800: #22531e;
  --color-woodland-grass-900: #034500;
  --color-woodland-grass-950: #0b2b08;
  --color-queen-of-trees: #003c27;
  --color-queen-of-trees-50: #e0feee;
  --color-queen-of-trees-100: #d3f5e3;
  --color-queen-of-trees-200: #bae3ce;
  --color-queen-of-trees-300: #9fcdb6;
  --color-queen-of-trees-400: #7baf95;
  --color-queen-of-trees-500: #5e937a;
  --color-queen-of-trees-600: #457760;
  --color-queen-of-trees-700: #305f4a;
  --color-queen-of-trees-800: #214b38;
  --color-queen-of-trees-900: #003c27;
  --color-queen-of-trees-950: #0a2419;
  --color-lonely-chocolate: #460001;
  --color-lonely-chocolate-50: #fff2f0;
  --color-lonely-chocolate-100: #ffe4e0;
  --color-lonely-chocolate-200: #ffc8c0;
  --color-lonely-chocolate-300: #f4aca2;
  --color-lonely-chocolate-400: #d88a7f;
  --color-lonely-chocolate-500: #bc6e64;
  --color-lonely-chocolate-600: #9e544b;
  --color-lonely-chocolate-700: #834038;
  --color-lonely-chocolate-800: #6a2f29;
  --color-lonely-chocolate-900: #55231d;
  --color-lonely-chocolate-950: #460001;
}

Similar palettes