Crème Brûlée to Go to Hell Black Color Palette

About this palette

Crème Brûlée to Go to Hell Black is a 5-color warm, earthy, vintage, monochromatic, gradient palette: #FCE4A2 (Crème Brûlée), #D4AF54 (Solar Relic), #A88F18 (Gecko), #645000 (Ayahuasca Vine), #312814 (Go to Hell Black). It mixes yellow, brown tones and feels warm overall. The strongest text pairing is #FCE4A2 on #312814 with a contrast ratio of 11.60:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Crème Brûlée	rgb(252, 228, 162)	hsl(44, 94%, 81%)
Solar Relic	rgb(212, 175, 84)	hsl(43, 60%, 58%)
Gecko	rgb(168, 143, 24)	hsl(50, 75%, 38%)
Ayahuasca Vine	rgb(100, 80, 0)	hsl(48, 100%, 20%)
Go to Hell Black	rgb(49, 40, 20)	hsl(41, 42%, 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.

Aa11.60:1 Very good#FCE4A2 on #312814
Aa11.60:1 Very good#312814 on #FCE4A2
Aa6.97:1 Good#D4AF54 on #312814
Aa6.97:1 Good#312814 on #D4AF54
Aa6.23:1 Good#FCE4A2 on #645000
Aa6.23:1 Good#645000 on #FCE4A2
Aa4.57:1 Good#A88F18 on #312814
Aa4.57:1 Good#312814 on #A88F18

Color blindness preview

CSS variables

/* Crème Brûlée to Go to Hell Black — https://swatchly.xyz/palette/fce4a2-d4af54-a88f18-645000-312814 */
:root {
  --cr-me-br-l-e: #fce4a2;
  --solar-relic: #d4af54;
  --gecko: #a88f18;
  --ayahuasca-vine: #645000;
  --go-to-hell-black: #312814;
}

Tailwind CSS v4

/* Crème Brûlée to Go to Hell Black — https://swatchly.xyz/palette/fce4a2-d4af54-a88f18-645000-312814 */
@theme {
  --color-cr-me-br-l-e: #fce4a2;
  --color-cr-me-br-l-e-50: #fef0ca;
  --color-cr-me-br-l-e-100: #fce4a2;
  --color-cr-me-br-l-e-200: #e4d2a1;
  --color-cr-me-br-l-e-300: #d0bc85;
  --color-cr-me-br-l-e-400: #b39d60;
  --color-cr-me-br-l-e-500: #998243;
  --color-cr-me-br-l-e-600: #7e6929;
  --color-cr-me-br-l-e-700: #665316;
  --color-cr-me-br-l-e-800: #514007;
  --color-cr-me-br-l-e-900: #3f3101;
  --color-cr-me-br-l-e-950: #281e00;
  --color-solar-relic: #d4af54;
  --color-solar-relic-50: #ffedc3;
  --color-solar-relic-100: #f9e0a5;
  --color-solar-relic-200: #e7c984;
  --color-solar-relic-300: #d4af54;
  --color-solar-relic-400: #b59237;
  --color-solar-relic-500: #9c790e;
  --color-solar-relic-600: #7f6100;
  --color-solar-relic-700: #674e00;
  --color-solar-relic-800: #523d00;
  --color-solar-relic-900: #413000;
  --color-solar-relic-950: #291d00;
  --color-gecko: #a88f18;
  --color-gecko-50: #fff8d9;
  --color-gecko-100: #fef0b5;
  --color-gecko-200: #efdd97;
  --color-gecko-300: #ddc876;
  --color-gecko-400: #c1aa48;
  --color-gecko-500: #a88f18;
  --color-gecko-600: #887300;
  --color-gecko-700: #6c5a00;
  --color-gecko-800: #544600;
  --color-gecko-900: #403500;
  --color-gecko-950: #282000;
  --color-ayahuasca-vine: #645000;
  --color-ayahuasca-vine-50: #fff5d6;
  --color-ayahuasca-vine-100: #f8ebc2;
  --color-ayahuasca-vine-200: #e6d6a5;
  --color-ayahuasca-vine-300: #d1bf86;
  --color-ayahuasca-vine-400: #b39e5f;
  --color-ayahuasca-vine-500: #978240;
  --color-ayahuasca-vine-600: #7b6725;
  --color-ayahuasca-vine-700: #645000;
  --color-ayahuasca-vine-800: #4e3e03;
  --color-ayahuasca-vine-900: #3d2f00;
  --color-ayahuasca-vine-950: #261d00;
  --color-go-to-hell-black: #312814;
  --color-go-to-hell-black-50: #fbf5e7;
  --color-go-to-hell-black-100: #f2eadb;
  --color-go-to-hell-black-200: #dfd7c4;
  --color-go-to-hell-black-300: #cac0ab;
  --color-go-to-hell-black-400: #a99e88;
  --color-go-to-hell-black-500: #8c816b;
  --color-go-to-hell-black-600: #6f6550;
  --color-go-to-hell-black-700: #564d3a;
  --color-go-to-hell-black-800: #403929;
  --color-go-to-hell-black-900: #312814;
  --color-go-to-hell-black-950: #1b170f;
}