Café Noir to Nectar Jackpot color palette

483515Café Noir 695100Ayahuasca Vine 936F00Glazed Chestnut DDA51CSunny Disposition F1D28FNectar Jackpot

Open in generator Export PNG, PDF, ASE…

About this palette

Café Noir to Nectar Jackpot is a 5-color warm, earthy, monochromatic, gradient palette: #483515 (Café Noir), #695100 (Ayahuasca Vine), #936F00 (Glazed Chestnut), #DDA51C (Sunny Disposition), #F1D28F (Nectar Jackpot). It mixes brown, yellow tones and feels warm overall. The strongest text pairing is #483515 on #F1D28F with a contrast ratio of 7.99:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Café Noir	rgb(72, 53, 21)	hsl(38, 55%, 18%)
Ayahuasca Vine	rgb(105, 81, 0)	hsl(46, 100%, 21%)
Glazed Chestnut	rgb(147, 111, 0)	hsl(45, 100%, 29%)
Sunny Disposition	rgb(221, 165, 28)	hsl(43, 78%, 49%)
Nectar Jackpot	rgb(241, 210, 143)	hsl(41, 78%, 75%)

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.99:1 Very good#483515 on #F1D28F
Aa7.99:1 Very good#F1D28F on #483515
Aa5.28:1 Good#483515 on #DDA51C
Aa5.28:1 Good#DDA51C on #483515
Aa5.17:1 Good#695100 on #F1D28F
Aa5.17:1 Good#F1D28F on #695100
Aa3.41:1 Poor#695100 on #DDA51C
Aa3.41:1 Poor#DDA51C on #695100

Color blindness preview

CSS variables

/* Café Noir to Nectar Jackpot — https://swatchly.xyz/palette/483515-695100-936f00-dda51c-f1d28f */
:root {
  --caf-noir: #483515;
  --ayahuasca-vine: #695100;
  --glazed-chestnut: #936f00;
  --sunny-disposition: #dda51c;
  --nectar-jackpot: #f1d28f;
}

Tailwind CSS v4

/* Café Noir to Nectar Jackpot — https://swatchly.xyz/palette/483515-695100-936f00-dda51c-f1d28f */
@theme {
  --color-caf-noir: #483515;
  --color-caf-noir-50: #fff3e2;
  --color-caf-noir-100: #f8e9d3;
  --color-caf-noir-200: #e6d5bb;
  --color-caf-noir-300: #d2bea0;
  --color-caf-noir-400: #b59f7f;
  --color-caf-noir-500: #9b8563;
  --color-caf-noir-600: #806c4b;
  --color-caf-noir-700: #695638;
  --color-caf-noir-800: #55442a;
  --color-caf-noir-900: #483515;
  --color-caf-noir-950: #2d2210;
  --color-ayahuasca-vine: #695100;
  --color-ayahuasca-vine-50: #fff4da;
  --color-ayahuasca-vine-100: #faeac1;
  --color-ayahuasca-vine-200: #e9d6a4;
  --color-ayahuasca-vine-300: #d5bf86;
  --color-ayahuasca-vine-400: #b79e5f;
  --color-ayahuasca-vine-500: #9c8340;
  --color-ayahuasca-vine-600: #806825;
  --color-ayahuasca-vine-700: #695100;
  --color-ayahuasca-vine-800: #523f01;
  --color-ayahuasca-vine-900: #403000;
  --color-ayahuasca-vine-950: #281d00;
  --color-glazed-chestnut: #936f00;
  --color-glazed-chestnut-50: #fff4dd;
  --color-glazed-chestnut-100: #ffebc0;
  --color-glazed-chestnut-200: #f4d89c;
  --color-glazed-chestnut-300: #e2c27c;
  --color-glazed-chestnut-400: #c7a352;
  --color-glazed-chestnut-500: #ad892e;
  --color-glazed-chestnut-600: #936f00;
  --color-glazed-chestnut-700: #755800;
  --color-glazed-chestnut-800: #5c4400;
  --color-glazed-chestnut-900: #473400;
  --color-glazed-chestnut-950: #2d2000;
  --color-sunny-disposition: #dda51c;
  --color-sunny-disposition-50: #fff9ef;
  --color-sunny-disposition-100: #fff1d7;
  --color-sunny-disposition-200: #ffdc9b;
  --color-sunny-disposition-300: #f3c66d;
  --color-sunny-disposition-400: #dda51c;
  --color-sunny-disposition-500: #b98800;
  --color-sunny-disposition-600: #956d00;
  --color-sunny-disposition-700: #765500;
  --color-sunny-disposition-800: #5b4100;
  --color-sunny-disposition-900: #453100;
  --color-sunny-disposition-950: #2b1d00;
  --color-nectar-jackpot: #f1d28f;
  --color-nectar-jackpot-50: #fff3d9;
  --color-nectar-jackpot-100: #fbe8bf;
  --color-nectar-jackpot-200: #f1d28f;
  --color-nectar-jackpot-300: #d6bc84;
  --color-nectar-jackpot-400: #b99d5e;
  --color-nectar-jackpot-500: #9e8140;
  --color-nectar-jackpot-600: #836725;
  --color-nectar-jackpot-700: #6a5110;
  --color-nectar-jackpot-800: #553f01;
  --color-nectar-jackpot-900: #423000;
  --color-nectar-jackpot-950: #2a1d00;
}