Secret Passage to Frozen Forest color palette

302D00Secret Passage 475A2FTurf 00895APrimal Green 16A554Secret Garden C7B16DCanadian Maple D0E9B8Frozen Forest

Open in generator Export PNG, PDF, ASE…

About this palette

Secret Passage to Frozen Forest is a 6-color cool, earthy, gradient palette: #302D00 (Secret Passage), #475A2F (Turf), #00895A (Primal Green), #16A554 (Secret Garden), #C7B16D (Canadian Maple), #D0E9B8 (Frozen Forest). It mixes brown, green, yellow tones and feels cool overall. The strongest text pairing is #302D00 on #D0E9B8 with a contrast ratio of 10.68:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret Passage	rgb(48, 45, 0)	hsl(56, 100%, 9%)
Turf	rgb(71, 90, 47)	hsl(87, 31%, 27%)
Primal Green	rgb(0, 137, 90)	hsl(159, 100%, 27%)
Secret Garden	rgb(22, 165, 84)	hsl(146, 76%, 37%)
Canadian Maple	rgb(199, 177, 109)	hsl(45, 45%, 60%)
Frozen Forest	rgb(208, 233, 184)	hsl(91, 53%, 82%)

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.

Aa10.68:1 Very good#302D00 on #D0E9B8
Aa10.68:1 Very good#D0E9B8 on #302D00
Aa6.62:1 Good#302D00 on #C7B16D
Aa6.62:1 Good#C7B16D on #302D00
Aa5.78:1 Good#475A2F on #D0E9B8
Aa5.78:1 Good#D0E9B8 on #475A2F
Aa4.36:1 Poor#302D00 on #16A554
Aa4.36:1 Poor#16A554 on #302D00

Color blindness preview

CSS variables

/* Secret Passage to Frozen Forest — https://swatchly.xyz/palette/302d00-475a2f-00895a-16a554-c7b16d-d0e9b8 */
:root {
  --secret-passage: #302d00;
  --turf: #475a2f;
  --primal-green: #00895a;
  --secret-garden: #16a554;
  --canadian-maple: #c7b16d;
  --frozen-forest: #d0e9b8;
}

Tailwind CSS v4

/* Secret Passage to Frozen Forest — https://swatchly.xyz/palette/302d00-475a2f-00895a-16a554-c7b16d-d0e9b8 */
@theme {
  --color-secret-passage: #302d00;
  --color-secret-passage-50: #f8f7dd;
  --color-secret-passage-100: #eeedd0;
  --color-secret-passage-200: #dbdab7;
  --color-secret-passage-300: #c5c49c;
  --color-secret-passage-400: #a5a377;
  --color-secret-passage-500: #88865a;
  --color-secret-passage-600: #6c6a40;
  --color-secret-passage-700: #54522c;
  --color-secret-passage-800: #403e1d;
  --color-secret-passage-900: #302d00;
  --color-secret-passage-950: #1c1a08;
  --color-turf: #475a2f;
  --color-turf-50: #edfbe0;
  --color-turf-100: #e3f1d3;
  --color-turf-200: #cddeba;
  --color-turf-300: #b4c89f;
  --color-turf-400: #94a97c;
  --color-turf-500: #788d5f;
  --color-turf-600: #5e7146;
  --color-turf-700: #475a2f;
  --color-turf-800: #374624;
  --color-turf-900: #293619;
  --color-turf-950: #19220d;
  --color-primal-green: #00895a;
  --color-primal-green-50: #dcffeb;
  --color-primal-green-100: #c0fddc;
  --color-primal-green-200: #a5edc6;
  --color-primal-green-300: #85daae;
  --color-primal-green-400: #5abe8e;
  --color-primal-green-500: #34a373;
  --color-primal-green-600: #00895a;
  --color-primal-green-700: #006d47;
  --color-primal-green-800: #005536;
  --color-primal-green-900: #004229;
  --color-primal-green-950: #002918;
  --color-secret-garden: #16a554;
  --color-secret-garden-50: #e1ffe7;
  --color-secret-garden-100: #c0ffce;
  --color-secret-garden-200: #9df1b2;
  --color-secret-garden-300: #7add96;
  --color-secret-garden-400: #4ac071;
  --color-secret-garden-500: #16a554;
  --color-secret-garden-600: #008641;
  --color-secret-garden-700: #006a32;
  --color-secret-garden-800: #005326;
  --color-secret-garden-900: #00401b;
  --color-secret-garden-950: #00280f;
  --color-canadian-maple: #c7b16d;
  --color-canadian-maple-50: #fbedc4;
  --color-canadian-maple-100: #f0e1b2;
  --color-canadian-maple-200: #dcca94;
  --color-canadian-maple-300: #c7b16d;
  --color-canadian-maple-400: #a99452;
  --color-canadian-maple-500: #907b37;
  --color-canadian-maple-600: #776320;
  --color-canadian-maple-700: #614f0d;
  --color-canadian-maple-800: #4f3f01;
  --color-canadian-maple-900: #3f3100;
  --color-canadian-maple-950: #281e00;
  --color-frozen-forest: #d0e9b8;
  --color-frozen-forest-50: #f3ffe9;
  --color-frozen-forest-100: #e9f8db;
  --color-frozen-forest-200: #d0e9b8;
  --color-frozen-forest-300: #bbcfa8;
  --color-frozen-forest-400: #99af83;
  --color-frozen-forest-500: #7c9265;
  --color-frozen-forest-600: #61764b;
  --color-frozen-forest-700: #4a5e36;
  --color-frozen-forest-800: #384926;
  --color-frozen-forest-900: #2a381b;
  --color-frozen-forest-950: #19230e;
}