Secret Passage to Green Mana Color Palette

About this palette

Secret Passage to Green Mana is a 5-color cool, earthy palette: #292A00 (Secret Passage), #A3CB69 (Fiddle-Leaf Fig), #444300 (Green Not Found), #3A7C2B (Lush Paradise), #00B26D (Green Mana). It mixes brown, green tones and feels cool overall. The strongest text pairing is #292A00 on #A3CB69 with a contrast ratio of 7.93:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret Passage	rgb(41, 42, 0)	hsl(61, 100%, 8%)
Fiddle-Leaf Fig	rgb(163, 203, 105)	hsl(84, 49%, 60%)
Green Not Found	rgb(68, 67, 0)	hsl(59, 100%, 13%)
Lush Paradise	rgb(58, 124, 43)	hsl(109, 49%, 33%)
Green Mana	rgb(0, 178, 109)	hsl(157, 100%, 35%)

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.93:1 Very good#292A00 on #A3CB69
Aa7.93:1 Very good#A3CB69 on #292A00
Aa5.52:1 Good#A3CB69 on #444300
Aa5.52:1 Good#444300 on #A3CB69
Aa5.32:1 Good#292A00 on #00B26D
Aa5.32:1 Good#00B26D on #292A00
Aa3.70:1 Poor#444300 on #00B26D
Aa3.70:1 Poor#00B26D on #444300

Color blindness preview

CSS variables

/* Secret Passage to Green Mana — https://swatchly.xyz/palette/292a00-a3cb69-444300-3a7c2b-00b26d */
:root {
  --secret-passage: #292a00;
  --fiddle-leaf-fig: #a3cb69;
  --green-not-found: #444300;
  --lush-paradise: #3a7c2b;
  --green-mana: #00b26d;
}

Tailwind CSS v4

/* Secret Passage to Green Mana — https://swatchly.xyz/palette/292a00-a3cb69-444300-3a7c2b-00b26d */
@theme {
  --color-secret-passage: #292a00;
  --color-secret-passage-50: #f5f8df;
  --color-secret-passage-100: #eceed2;
  --color-secret-passage-200: #d8dbb9;
  --color-secret-passage-300: #c2c59e;
  --color-secret-passage-400: #a2a57c;
  --color-secret-passage-500: #898c61;
  --color-secret-passage-600: #707349;
  --color-secret-passage-700: #5b5d37;
  --color-secret-passage-800: #4a4b29;
  --color-secret-passage-900: #3b3d1e;
  --color-secret-passage-950: #292a00;
  --color-fiddle-leaf-fig: #a3cb69;
  --color-fiddle-leaf-fig-50: #e4fcc5;
  --color-fiddle-leaf-fig-100: #d7f3b4;
  --color-fiddle-leaf-fig-200: #c0e096;
  --color-fiddle-leaf-fig-300: #a3cb69;
  --color-fiddle-leaf-fig-400: #86ab4d;
  --color-fiddle-leaf-fig-500: #6c912d;
  --color-fiddle-leaf-fig-600: #54760a;
  --color-fiddle-leaf-fig-700: #415e00;
  --color-fiddle-leaf-fig-800: #334a00;
  --color-fiddle-leaf-fig-900: #273a00;
  --color-fiddle-leaf-fig-950: #172400;
  --color-green-not-found: #444300;
  --color-green-not-found-50: #f7f8d6;
  --color-green-not-found-100: #edeec8;
  --color-green-not-found-200: #dadbae;
  --color-green-not-found-300: #c4c591;
  --color-green-not-found-400: #a4a56c;
  --color-green-not-found-500: #89894e;
  --color-green-not-found-600: #6e6e35;
  --color-green-not-found-700: #575621;
  --color-green-not-found-800: #444300;
  --color-green-not-found-900: #34330a;
  --color-green-not-found-950: #201f04;
  --color-lush-paradise: #3a7c2b;
  --color-lush-paradise-50: #e2ffdc;
  --color-lush-paradise-100: #cef9c5;
  --color-lush-paradise-200: #b4e8a9;
  --color-lush-paradise-300: #98d28b;
  --color-lush-paradise-400: #73b465;
  --color-lush-paradise-500: #559847;
  --color-lush-paradise-600: #3a7c2b;
  --color-lush-paradise-700: #286319;
  --color-lush-paradise-800: #194f0b;
  --color-lush-paradise-900: #0f3d03;
  --color-lush-paradise-950: #062700;
  --color-green-mana: #00b26d;
  --color-green-mana-50: #cdffe0;
  --color-green-mana-100: #a9fbc9;
  --color-green-mana-200: #84e8af;
  --color-green-mana-300: #5ad292;
  --color-green-mana-400: #00b26d;
  --color-green-mana-500: #00955a;
  --color-green-mana-600: #007848;
  --color-green-mana-700: #006039;
  --color-green-mana-800: #004c2c;
  --color-green-mana-900: #003c21;
  --color-green-mana-950: #002714;
}