Start generating

Torchlight to Thrilling Lime color palette

FFC88ETorchlight517339Mana Tree221D00Midnight Pines553500Moelleux au Chocolat898700Olive82C157Thrilling Lime
Open in generator Export PNG, PDF, ASE…

About this palette

Torchlight to Thrilling Lime is a 6-color warm, earthy, vintage palette: #FFC88E (Torchlight), #517339 (Mana Tree), #221D00 (Midnight Pines), #553500 (Moelleux au Chocolat), #898700 (Olive), #82C157 (Thrilling Lime). It mixes orange, green, brown, yellow tones and feels warm overall. The strongest text pairing is #FFC88E on #221D00 with a contrast ratio of 11.18:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Torchlightrgb(255, 200, 142)hsl(31, 100%, 78%)
Mana Treergb(81, 115, 57)hsl(95, 34%, 34%)
Midnight Pinesrgb(34, 29, 0)hsl(51, 100%, 7%)
Moelleux au Chocolatrgb(85, 53, 0)hsl(37, 100%, 17%)
Olivergb(137, 135, 0)hsl(59, 100%, 27%)
Thrilling Limergb(130, 193, 87)hsl(96, 46%, 55%)

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.18:1 Very good#FFC88E on #221D00
  • Aa11.18:1 Very good#221D00 on #FFC88E
  • Aa7.81:1 Very good#221D00 on #82C157
  • Aa7.81:1 Very good#82C157 on #221D00
  • Aa7.34:1 Very good#FFC88E on #553500
  • Aa7.34:1 Very good#553500 on #FFC88E
  • Aa5.13:1 Good#553500 on #82C157
  • Aa5.13:1 Good#82C157 on #553500

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Torchlight to Thrilling Lime — https://swatchly.xyz/palette/ffc88e-517339-221d00-553500-898700-82c157 */
:root {
  --torchlight: #ffc88e;
  --mana-tree: #517339;
  --midnight-pines: #221d00;
  --moelleux-au-chocolat: #553500;
  --olive: #898700;
  --thrilling-lime: #82c157;
}

Tailwind CSS v4

/* Torchlight to Thrilling Lime — https://swatchly.xyz/palette/ffc88e-517339-221d00-553500-898700-82c157 */
@theme {
  --color-torchlight: #ffc88e;
  --color-torchlight-50: #fff0e1;
  --color-torchlight-100: #ffe3c6;
  --color-torchlight-200: #ffc88e;
  --color-torchlight-300: #e3b483;
  --color-torchlight-400: #c6945d;
  --color-torchlight-500: #ab7940;
  --color-torchlight-600: #8f5f26;
  --color-torchlight-700: #754a12;
  --color-torchlight-800: #5e3803;
  --color-torchlight-900: #4a2a00;
  --color-torchlight-950: #301900;
  --color-mana-tree: #517339;
  --color-mana-tree-50: #e8fdda;
  --color-mana-tree-100: #dbf4cc;
  --color-mana-tree-200: #c3e1b2;
  --color-mana-tree-300: #aaca95;
  --color-mana-tree-400: #88ab71;
  --color-mana-tree-500: #6b8f54;
  --color-mana-tree-600: #517339;
  --color-mana-tree-700: #3e5c28;
  --color-mana-tree-800: #2e481b;
  --color-mana-tree-900: #223811;
  --color-mana-tree-950: #132307;
  --color-midnight-pines: #221d00;
  --color-midnight-pines-50: #f9f6e2;
  --color-midnight-pines-100: #efecd6;
  --color-midnight-pines-200: #dcd9be;
  --color-midnight-pines-300: #c7c2a4;
  --color-midnight-pines-400: #a8a382;
  --color-midnight-pines-500: #8c8766;
  --color-midnight-pines-600: #716c4c;
  --color-midnight-pines-700: #595538;
  --color-midnight-pines-800: #454128;
  --color-midnight-pines-900: #35311c;
  --color-midnight-pines-950: #221d00;
  --color-moelleux-au-chocolat: #553500;
  --color-moelleux-au-chocolat-50: #fff3e5;
  --color-moelleux-au-chocolat-100: #ffe7ca;
  --color-moelleux-au-chocolat-200: #efd2af;
  --color-moelleux-au-chocolat-300: #dbba91;
  --color-moelleux-au-chocolat-400: #bc986b;
  --color-moelleux-au-chocolat-500: #a07c4e;
  --color-moelleux-au-chocolat-600: #826134;
  --color-moelleux-au-chocolat-700: #684a21;
  --color-moelleux-au-chocolat-800: #553500;
  --color-moelleux-au-chocolat-900: #3f290b;
  --color-moelleux-au-chocolat-950: #281804;
  --color-olive: #898700;
  --color-olive-50: #f8f9c0;
  --color-olive-100: #eeefae;
  --color-olive-200: #dadb8d;
  --color-olive-300: #c4c469;
  --color-olive-400: #a5a439;
  --color-olive-500: #898700;
  --color-olive-600: #6e6d00;
  --color-olive-700: #575600;
  --color-olive-800: #444300;
  --color-olive-900: #353400;
  --color-olive-950: #212000;
  --color-thrilling-lime: #82c157;
  --color-thrilling-lime-50: #efffe6;
  --color-thrilling-lime-100: #d9ffc2;
  --color-thrilling-lime-200: #c2efa7;
  --color-thrilling-lime-300: #a8dc88;
  --color-thrilling-lime-400: #82c157;
  --color-thrilling-lime-500: #65a238;
  --color-thrilling-lime-600: #498511;
  --color-thrilling-lime-700: #376900;
  --color-thrilling-lime-800: #295200;
  --color-thrilling-lime-900: #1e3e00;
  --color-thrilling-lime-950: #102600;
}

Similar palettes