Hazelnut Chocolate to Pumpkin Cat color palette

764500Hazelnut Chocolate F5D094Sparkling Champagne 1B2800Lindworm Green E07E0EPumpkin Cat

About this palette

Hazelnut Chocolate to Pumpkin Cat is a 4-color warm, earthy palette: #764500 (Hazelnut Chocolate), #F5D094 (Sparkling Champagne), #1B2800 (Lindworm Green), #E07E0E (Pumpkin Cat). It mixes brown, yellow, green, orange tones and feels warm overall. The strongest text pairing is #F5D094 on #1B2800 with a contrast ratio of 10.62:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hazelnut Chocolate	rgb(118, 69, 0)	hsl(35, 100%, 23%)
Sparkling Champagne	rgb(245, 208, 148)	hsl(37, 83%, 77%)
Lindworm Green	rgb(27, 40, 0)	hsl(80, 100%, 8%)
Pumpkin Cat	rgb(224, 126, 14)	hsl(32, 88%, 47%)

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.62:1 Very good#F5D094 on #1B2800
Aa10.62:1 Very good#1B2800 on #F5D094
Aa5.47:1 Good#764500 on #F5D094
Aa5.47:1 Good#F5D094 on #764500
Aa5.30:1 Good#1B2800 on #E07E0E
Aa5.30:1 Good#E07E0E on #1B2800

Color blindness preview

CSS variables

/* Hazelnut Chocolate to Pumpkin Cat — https://swatchly.xyz/palette/764500-f5d094-1b2800-e07e0e */
:root {
  --hazelnut-chocolate: #764500;
  --sparkling-champagne: #f5d094;
  --lindworm-green: #1b2800;
  --pumpkin-cat: #e07e0e;
}

Tailwind CSS v4

/* Hazelnut Chocolate to Pumpkin Cat — https://swatchly.xyz/palette/764500-f5d094-1b2800-e07e0e */
@theme {
  --color-hazelnut-chocolate: #764500;
  --color-hazelnut-chocolate-50: #fff3e7;
  --color-hazelnut-chocolate-100: #ffe6cf;
  --color-hazelnut-chocolate-200: #f9cea4;
  --color-hazelnut-chocolate-300: #e6b586;
  --color-hazelnut-chocolate-400: #c8945e;
  --color-hazelnut-chocolate-500: #ac773f;
  --color-hazelnut-chocolate-600: #8e5d25;
  --color-hazelnut-chocolate-700: #764500;
  --color-hazelnut-chocolate-800: #5c3603;
  --color-hazelnut-chocolate-900: #482800;
  --color-hazelnut-chocolate-950: #2e1800;
  --color-sparkling-champagne: #f5d094;
  --color-sparkling-champagne-50: #fff2df;
  --color-sparkling-champagne-100: #fee7c2;
  --color-sparkling-champagne-200: #f5d094;
  --color-sparkling-champagne-300: #dabb89;
  --color-sparkling-champagne-400: #bd9b63;
  --color-sparkling-champagne-500: #a27f45;
  --color-sparkling-champagne-600: #86652b;
  --color-sparkling-champagne-700: #6d4f18;
  --color-sparkling-champagne-800: #573d09;
  --color-sparkling-champagne-900: #442e02;
  --color-sparkling-champagne-950: #2c1c00;
  --color-lindworm-green: #1b2800;
  --color-lindworm-green-50: #effae0;
  --color-lindworm-green-100: #e4f1d4;
  --color-lindworm-green-200: #cfdebc;
  --color-lindworm-green-300: #b8c8a1;
  --color-lindworm-green-400: #98a97f;
  --color-lindworm-green-500: #7d8e63;
  --color-lindworm-green-600: #64744b;
  --color-lindworm-green-700: #4f5e38;
  --color-lindworm-green-800: #3e4a29;
  --color-lindworm-green-900: #303b1e;
  --color-lindworm-green-950: #1b2800;
  --color-pumpkin-cat: #e07e0e;
  --color-pumpkin-cat-50: #ffefe4;
  --color-pumpkin-cat-100: #ffe1ca;
  --color-pumpkin-cat-200: #ffc597;
  --color-pumpkin-cat-300: #fca357;
  --color-pumpkin-cat-400: #e07e0e;
  --color-pumpkin-cat-500: #bc6800;
  --color-pumpkin-cat-600: #995300;
  --color-pumpkin-cat-700: #7b4100;
  --color-pumpkin-cat-800: #613300;
  --color-pumpkin-cat-900: #4d2700;
  --color-pumpkin-cat-950: #321700;
}