Secret Passage to Grape Green color palette

2E2300Secret Passage 134781Maritime Outpost 7F3677Violet Vixen 9D6D1BPuma 63BF76Bermudagrass ACE99FGrape Green

Open in generator Export PNG, PDF, ASE…

About this palette

Secret Passage to Grape Green is a 6-color earthy palette: #2E2300 (Secret Passage), #134781 (Maritime Outpost), #7F3677 (Violet Vixen), #9D6D1B (Puma), #63BF76 (Bermudagrass), #ACE99F (Grape Green). It mixes brown, blue, pink, yellow, green tones and feels balanced overall. The strongest text pairing is #2E2300 on #ACE99F with a contrast ratio of 10.99:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret Passage	rgb(46, 35, 0)	hsl(46, 100%, 9%)
Maritime Outpost	rgb(19, 71, 129)	hsl(212, 74%, 29%)
Violet Vixen	rgb(127, 54, 119)	hsl(307, 40%, 35%)
Puma	rgb(157, 109, 27)	hsl(38, 71%, 36%)
Bermudagrass	rgb(99, 191, 118)	hsl(132, 42%, 57%)
Grape Green	rgb(172, 233, 159)	hsl(109, 63%, 77%)

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.99:1 Very good#2E2300 on #ACE99F
Aa10.99:1 Very good#ACE99F on #2E2300
Aa6.81:1 Good#2E2300 on #63BF76
Aa6.81:1 Good#63BF76 on #2E2300
Aa6.64:1 Good#134781 on #ACE99F
Aa6.64:1 Good#ACE99F on #134781
Aa5.53:1 Good#7F3677 on #ACE99F
Aa5.53:1 Good#ACE99F on #7F3677

Color blindness preview

CSS variables

/* Secret Passage to Grape Green — https://swatchly.xyz/palette/2e2300-134781-7f3677-9d6d1b-63bf76-ace99f */
:root {
  --secret-passage: #2e2300;
  --maritime-outpost: #134781;
  --violet-vixen: #7f3677;
  --puma: #9d6d1b;
  --bermudagrass: #63bf76;
  --grape-green: #ace99f;
}

Tailwind CSS v4

/* Secret Passage to Grape Green — https://swatchly.xyz/palette/2e2300-134781-7f3677-9d6d1b-63bf76-ace99f */
@theme {
  --color-secret-passage: #2e2300;
  --color-secret-passage-50: #fcf5df;
  --color-secret-passage-100: #f3ebd3;
  --color-secret-passage-200: #e1d7bb;
  --color-secret-passage-300: #ccc0a0;
  --color-secret-passage-400: #ada17d;
  --color-secret-passage-500: #938662;
  --color-secret-passage-600: #796d4a;
  --color-secret-passage-700: #635737;
  --color-secret-passage-800: #4f4529;
  --color-secret-passage-900: #3f371e;
  --color-secret-passage-950: #2e2300;
  --color-maritime-outpost: #134781;
  --color-maritime-outpost-50: #eff6ff;
  --color-maritime-outpost-100: #deedff;
  --color-maritime-outpost-200: #bddaff;
  --color-maritime-outpost-300: #98c5fe;
  --color-maritime-outpost-400: #74a6e5;
  --color-maritime-outpost-500: #588bcb;
  --color-maritime-outpost-600: #3f71ae;
  --color-maritime-outpost-700: #2c5a92;
  --color-maritime-outpost-800: #134781;
  --color-maritime-outpost-900: #123761;
  --color-maritime-outpost-950: #072241;
  --color-violet-vixen: #7f3677;
  --color-violet-vixen-50: #fff0fc;
  --color-violet-vixen-100: #ffe0fa;
  --color-violet-vixen-200: #fec1f5;
  --color-violet-vixen-300: #eca7e2;
  --color-violet-vixen-400: #d084c5;
  --color-violet-vixen-500: #b467aa;
  --color-violet-vixen-600: #974e8e;
  --color-violet-vixen-700: #7f3677;
  --color-violet-vixen-800: #64295e;
  --color-violet-vixen-900: #4f1d4a;
  --color-violet-vixen-950: #340f30;
  --color-puma: #9d6d1b;
  --color-puma-50: #fff3e4;
  --color-puma-100: #ffeace;
  --color-puma-200: #fbd5a1;
  --color-puma-300: #eac084;
  --color-puma-400: #d0a15b;
  --color-puma-500: #b7863b;
  --color-puma-600: #9d6d1b;
  --color-puma-700: #805500;
  --color-puma-800: #644200;
  --color-puma-900: #4d3200;
  --color-puma-950: #311e00;
  --color-bermudagrass: #63bf76;
  --color-bermudagrass-50: #e7ffe9;
  --color-bermudagrass-100: #c9fed1;
  --color-bermudagrass-200: #aeeeb8;
  --color-bermudagrass-300: #90db9d;
  --color-bermudagrass-400: #63bf76;
  --color-bermudagrass-500: #45a15a;
  --color-bermudagrass-600: #248440;
  --color-bermudagrass-700: #056a2b;
  --color-bermudagrass-800: #00531f;
  --color-bermudagrass-900: #004016;
  --color-bermudagrass-950: #00280b;
  --color-grape-green: #ace99f;
  --color-grape-green-50: #deffd7;
  --color-grape-green-100: #d0f6c8;
  --color-grape-green-200: #ace99f;
  --color-grape-green-300: #9dd092;
  --color-grape-green-400: #79b26d;
  --color-grape-green-500: #5d9651;
  --color-grape-green-600: #447b38;
  --color-grape-green-700: #306325;
  --color-grape-green-800: #214e17;
  --color-grape-green-900: #163d0d;
  --color-grape-green-950: #0a2605;
}