Lumberjack to Hobgoblin Color Palette

About this palette

Lumberjack to Hobgoblin is a 4-color cool palette: #9D4B45 (Lumberjack), #00412F (Lost in the Woods), #ECC1F1 (Purple’s Baby Sister), #00A68C (Hobgoblin). It mixes red, turquoise, pink tones and feels cool overall. The strongest text pairing is #00412F on #ECC1F1 with a contrast ratio of 7.49:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lumberjack	rgb(157, 75, 69)	hsl(4, 39%, 44%)
Lost in the Woods	rgb(0, 65, 47)	hsl(163, 100%, 13%)
Purple’s Baby Sister	rgb(236, 193, 241)	hsl(294, 63%, 85%)
Hobgoblin	rgb(0, 166, 140)	hsl(171, 100%, 33%)

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.49:1 Very good#00412F on #ECC1F1
Aa7.49:1 Very good#ECC1F1 on #00412F
Aa3.82:1 Poor#9D4B45 on #ECC1F1
Aa3.82:1 Poor#ECC1F1 on #9D4B45
Aa3.80:1 Poor#00412F on #00A68C
Aa3.80:1 Poor#00A68C on #00412F

Color blindness preview

CSS variables

/* Lumberjack to Hobgoblin — https://swatchly.xyz/palette/9d4b45-00412f-ecc1f1-00a68c */
:root {
  --lumberjack: #9d4b45;
  --lost-in-the-woods: #00412f;
  --purple-s-baby-sister: #ecc1f1;
  --hobgoblin: #00a68c;
}

Tailwind CSS v4

/* Lumberjack to Hobgoblin — https://swatchly.xyz/palette/9d4b45-00412f-ecc1f1-00a68c */
@theme {
  --color-lumberjack: #9d4b45;
  --color-lumberjack-50: #fff2f0;
  --color-lumberjack-100: #ffe3df;
  --color-lumberjack-200: #ffc6bf;
  --color-lumberjack-300: #f6a79e;
  --color-lumberjack-400: #d9837b;
  --color-lumberjack-500: #bb665f;
  --color-lumberjack-600: #9d4b45;
  --color-lumberjack-700: #803833;
  --color-lumberjack-800: #682925;
  --color-lumberjack-900: #521d1a;
  --color-lumberjack-950: #36100e;
  --color-lost-in-the-woods: #00412f;
  --color-lost-in-the-woods-50: #defef0;
  --color-lost-in-the-woods-100: #d1f5e6;
  --color-lost-in-the-woods-200: #b9e3d1;
  --color-lost-in-the-woods-300: #9dcdb9;
  --color-lost-in-the-woods-400: #7ab09a;
  --color-lost-in-the-woods-500: #5d957f;
  --color-lost-in-the-woods-600: #447a66;
  --color-lost-in-the-woods-700: #306351;
  --color-lost-in-the-woods-800: #214f3f;
  --color-lost-in-the-woods-900: #00412f;
  --color-lost-in-the-woods-950: #0a281e;
  --color-purple-s-baby-sister: #ecc1f1;
  --color-purple-s-baby-sister-50: #fdeaff;
  --color-purple-s-baby-sister-100: #f8dcfb;
  --color-purple-s-baby-sister-200: #ecc1f1;
  --color-purple-s-baby-sister-300: #d3aed7;
  --color-purple-s-baby-sister-400: #b68eba;
  --color-purple-s-baby-sister-500: #9b73a0;
  --color-purple-s-baby-sister-600: #805b85;
  --color-purple-s-baby-sister-700: #68466c;
  --color-purple-s-baby-sister-800: #533657;
  --color-purple-s-baby-sister-900: #412844;
  --color-purple-s-baby-sister-950: #29172c;
  --color-hobgoblin: #00a68c;
  --color-hobgoblin-50: #dffff6;
  --color-hobgoblin-100: #bbffed;
  --color-hobgoblin-200: #9cefda;
  --color-hobgoblin-300: #7adcc5;
  --color-hobgoblin-400: #47c0a6;
  --color-hobgoblin-500: #00a68c;
  --color-hobgoblin-600: #008670;
  --color-hobgoblin-700: #006a59;
  --color-hobgoblin-800: #005345;
  --color-hobgoblin-900: #003f34;
  --color-hobgoblin-950: #002720;
}