Hobgoblin to Green Not Found Color Palette

About this palette

Hobgoblin to Green Not Found is a 5-color cool palette: #00A991 (Hobgoblin), #9DFFBA (Creamy Mint), #B1BE00 (Leafy Woodland), #117C3A (Pharmaceutical Green), #3F4100 (Green Not Found). It mixes turquoise, green, brown tones and feels cool overall. The strongest text pairing is #9DFFBA on #3F4100 with a contrast ratio of 8.87:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hobgoblin	rgb(0, 169, 145)	hsl(171, 100%, 33%)
Creamy Mint	rgb(157, 255, 186)	hsl(138, 100%, 81%)
Leafy Woodland	rgb(177, 190, 0)	hsl(64, 100%, 37%)
Pharmaceutical Green	rgb(17, 124, 58)	hsl(143, 76%, 28%)
Green Not Found	rgb(63, 65, 0)	hsl(62, 100%, 13%)

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.

Aa8.87:1 Very good#9DFFBA on #3F4100
Aa8.87:1 Very good#3F4100 on #9DFFBA
Aa5.20:1 Good#B1BE00 on #3F4100
Aa5.20:1 Good#3F4100 on #B1BE00
Aa4.40:1 Poor#9DFFBA on #117C3A
Aa4.40:1 Poor#117C3A on #9DFFBA
Aa3.60:1 Poor#00A991 on #3F4100
Aa3.60:1 Poor#3F4100 on #00A991

Color blindness preview

CSS variables

/* Hobgoblin to Green Not Found — https://swatchly.xyz/palette/00a991-9dffba-b1be00-117c3a-3f4100 */
:root {
  --hobgoblin: #00a991;
  --creamy-mint: #9dffba;
  --leafy-woodland: #b1be00;
  --pharmaceutical-green: #117c3a;
  --green-not-found: #3f4100;
}

Tailwind CSS v4

/* Hobgoblin to Green Not Found — https://swatchly.xyz/palette/00a991-9dffba-b1be00-117c3a-3f4100 */
@theme {
  --color-hobgoblin: #00a991;
  --color-hobgoblin-50: #e1fff7;
  --color-hobgoblin-100: #beffef;
  --color-hobgoblin-200: #9ef1dd;
  --color-hobgoblin-300: #7bdec9;
  --color-hobgoblin-400: #49c2ab;
  --color-hobgoblin-500: #00a991;
  --color-hobgoblin-600: #008874;
  --color-hobgoblin-700: #006c5c;
  --color-hobgoblin-800: #005447;
  --color-hobgoblin-900: #004036;
  --color-hobgoblin-950: #002821;
  --color-creamy-mint: #9dffba;
  --color-creamy-mint-50: #ccffd9;
  --color-creamy-mint-100: #9dffba;
  --color-creamy-mint-200: #9ee6b2;
  --color-creamy-mint-300: #80d399;
  --color-creamy-mint-400: #58b577;
  --color-creamy-mint-500: #369b5c;
  --color-creamy-mint-600: #138044;
  --color-creamy-mint-700: #006733;
  --color-creamy-mint-800: #005127;
  --color-creamy-mint-900: #003e1c;
  --color-creamy-mint-950: #002710;
  --color-leafy-woodland: #b1be00;
  --color-leafy-woodland-50: #ebf6a5;
  --color-leafy-woodland-100: #dfeb8d;
  --color-leafy-woodland-200: #c9d664;
  --color-leafy-woodland-300: #b1be00;
  --color-leafy-woodland-400: #95a000;
  --color-leafy-woodland-500: #7c8500;
  --color-leafy-woodland-600: #646c00;
  --color-leafy-woodland-700: #505700;
  --color-leafy-woodland-800: #404500;
  --color-leafy-woodland-900: #323700;
  --color-leafy-woodland-950: #1f2200;
  --color-pharmaceutical-green: #117c3a;
  --color-pharmaceutical-green-50: #dfffe4;
  --color-pharmaceutical-green-100: #c3fbcd;
  --color-pharmaceutical-green-200: #a5e9b3;
  --color-pharmaceutical-green-300: #85d496;
  --color-pharmaceutical-green-400: #5bb572;
  --color-pharmaceutical-green-500: #399855;
  --color-pharmaceutical-green-600: #117c3a;
  --color-pharmaceutical-green-700: #00632a;
  --color-pharmaceutical-green-800: #004e20;
  --color-pharmaceutical-green-900: #003c17;
  --color-pharmaceutical-green-950: #00260c;
  --color-green-not-found: #3f4100;
  --color-green-not-found-50: #f5f9d7;
  --color-green-not-found-100: #ecefca;
  --color-green-not-found-200: #d8dcaf;
  --color-green-not-found-300: #c1c592;
  --color-green-not-found-400: #a1a56c;
  --color-green-not-found-500: #85884e;
  --color-green-not-found-600: #696d35;
  --color-green-not-found-700: #525522;
  --color-green-not-found-800: #3f4100;
  --color-green-not-found-900: #30310b;
  --color-green-not-found-950: #1d1e04;
}