Chocolate Fantasies to Torchlight Color Palette

About this palette

Chocolate Fantasies to Torchlight is a 5-color cool palette: #5B3200 (Chocolate Fantasies), #00766C (Emperor Jade), #9765D4 (Legendary Lavender), #BD99FF (Diva), #FFC992 (Torchlight). It mixes brown, turquoise, purple, orange tones and feels cool overall. The strongest text pairing is #5B3200 on #FFC992 with a contrast ratio of 7.38:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chocolate Fantasies	rgb(91, 50, 0)	hsl(33, 100%, 18%)
Emperor Jade	rgb(0, 118, 108)	hsl(175, 100%, 23%)
Legendary Lavender	rgb(151, 101, 212)	hsl(267, 56%, 61%)
Diva	rgb(189, 153, 255)	hsl(261, 100%, 80%)
Torchlight	rgb(255, 201, 146)	hsl(30, 100%, 79%)

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.38:1 Very good#5B3200 on #FFC992
Aa7.38:1 Very good#FFC992 on #5B3200
Aa4.82:1 Good#5B3200 on #BD99FF
Aa4.82:1 Good#BD99FF on #5B3200
Aa3.68:1 Poor#00766C on #FFC992
Aa3.68:1 Poor#FFC992 on #00766C

Color blindness preview

CSS variables

/* Chocolate Fantasies to Torchlight — https://swatchly.xyz/palette/5b3200-00766c-9765d4-bd99ff-ffc992 */
:root {
  --chocolate-fantasies: #5b3200;
  --emperor-jade: #00766c;
  --legendary-lavender: #9765d4;
  --diva: #bd99ff;
  --torchlight: #ffc992;
}

Tailwind CSS v4

/* Chocolate Fantasies to Torchlight — https://swatchly.xyz/palette/5b3200-00766c-9765d4-bd99ff-ffc992 */
@theme {
  --color-chocolate-fantasies: #5b3200;
  --color-chocolate-fantasies-50: #fff3e8;
  --color-chocolate-fantasies-100: #ffe6d1;
  --color-chocolate-fantasies-200: #f5d0af;
  --color-chocolate-fantasies-300: #e1b791;
  --color-chocolate-fantasies-400: #c3956b;
  --color-chocolate-fantasies-500: #a7784e;
  --color-chocolate-fantasies-600: #895d34;
  --color-chocolate-fantasies-700: #6e4721;
  --color-chocolate-fantasies-800: #5b3200;
  --color-chocolate-fantasies-900: #43280b;
  --color-chocolate-fantasies-950: #2b1704;
  --color-emperor-jade: #00766c;
  --color-emperor-jade-50: #d7fff9;
  --color-emperor-jade-100: #c1f7ef;
  --color-emperor-jade-200: #a2e4db;
  --color-emperor-jade-300: #81cec4;
  --color-emperor-jade-400: #56afa4;
  --color-emperor-jade-500: #329287;
  --color-emperor-jade-600: #00766c;
  --color-emperor-jade-700: #005e56;
  --color-emperor-jade-800: #004943;
  --color-emperor-jade-900: #003934;
  --color-emperor-jade-950: #002420;
  --color-legendary-lavender: #9765d4;
  --color-legendary-lavender-50: #f7f2ff;
  --color-legendary-lavender-100: #eee5ff;
  --color-legendary-lavender-200: #dfcbff;
  --color-legendary-lavender-300: #ceabff;
  --color-legendary-lavender-400: #b383f1;
  --color-legendary-lavender-500: #9765d4;
  --color-legendary-lavender-600: #7c4bb5;
  --color-legendary-lavender-700: #653697;
  --color-legendary-lavender-800: #50277c;
  --color-legendary-lavender-900: #3f1b64;
  --color-legendary-lavender-950: #280e43;
  --color-diva: #bd99ff;
  --color-diva-50: #fbf9ff;
  --color-diva-100: #f4f0ff;
  --color-diva-200: #e6dbff;
  --color-diva-300: #d5c1ff;
  --color-diva-400: #bd99ff;
  --color-diva-500: #9f7bdd;
  --color-diva-600: #815dbd;
  --color-diva-700: #68459d;
  --color-diva-800: #51327f;
  --color-diva-900: #3e2364;
  --color-diva-950: #261241;
  --color-torchlight: #ffc992;
  --color-torchlight-50: #fff0e2;
  --color-torchlight-100: #ffe3c8;
  --color-torchlight-200: #ffc992;
  --color-torchlight-300: #e3b587;
  --color-torchlight-400: #c69561;
  --color-torchlight-500: #ab7944;
  --color-torchlight-600: #8e5f2a;
  --color-torchlight-700: #754a17;
  --color-torchlight-800: #5e3909;
  --color-torchlight-900: #4a2b02;
  --color-torchlight-950: #301900;
}