Start generating

Forestial Outpost to Treetop Cathedral color palette

616400Forestial Outpost0E170AKing Kong3FB274Turtle Warrior6BCFA8Crystal GemF3F09CPale Canary384A1ETreetop Cathedral
Open in generator Export PNG, PDF, ASE…

About this palette

Forestial Outpost to Treetop Cathedral is a 6-color earthy palette: #616400 (Forestial Outpost), #0E170A (King Kong), #3FB274 (Turtle Warrior), #6BCFA8 (Crystal Gem), #F3F09C (Pale Canary), #384A1E (Treetop Cathedral). It mixes brown, black, green, turquoise, yellow tones and feels cool overall. The strongest text pairing is #0E170A on #F3F09C with a contrast ratio of 15.50:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Forestial Outpostrgb(97, 100, 0)hsl(62, 100%, 20%)
King Kongrgb(14, 23, 10)hsl(102, 39%, 6%)
Turtle Warriorrgb(63, 178, 116)hsl(148, 48%, 47%)
Crystal Gemrgb(107, 207, 168)hsl(157, 51%, 62%)
Pale Canaryrgb(243, 240, 156)hsl(58, 78%, 78%)
Treetop Cathedralrgb(56, 74, 30)hsl(85, 42%, 20%)

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.

  • Aa15.50:1 Super#0E170A on #F3F09C
  • Aa15.50:1 Super#F3F09C on #0E170A
  • Aa9.70:1 Very good#0E170A on #6BCFA8
  • Aa9.70:1 Very good#6BCFA8 on #0E170A
  • Aa8.20:1 Very good#F3F09C on #384A1E
  • Aa8.20:1 Very good#384A1E on #F3F09C
  • Aa6.84:1 Good#0E170A on #3FB274
  • Aa6.84:1 Good#3FB274 on #0E170A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Forestial Outpost to Treetop Cathedral — https://swatchly.xyz/palette/616400-0e170a-3fb274-6bcfa8-f3f09c-384a1e */
:root {
  --forestial-outpost: #616400;
  --king-kong: #0e170a;
  --turtle-warrior: #3fb274;
  --crystal-gem: #6bcfa8;
  --pale-canary: #f3f09c;
  --treetop-cathedral: #384a1e;
}

Tailwind CSS v4

/* Forestial Outpost to Treetop Cathedral — https://swatchly.xyz/palette/616400-0e170a-3fb274-6bcfa8-f3f09c-384a1e */
@theme {
  --color-forestial-outpost: #616400;
  --color-forestial-outpost-50: #f6facd;
  --color-forestial-outpost-100: #ecf0bd;
  --color-forestial-outpost-200: #dadfa3;
  --color-forestial-outpost-300: #c6cb86;
  --color-forestial-outpost-400: #a8ad60;
  --color-forestial-outpost-500: #8f9341;
  --color-forestial-outpost-600: #767a25;
  --color-forestial-outpost-700: #616400;
  --color-forestial-outpost-800: #4c4e00;
  --color-forestial-outpost-900: #3a3c00;
  --color-forestial-outpost-950: #242600;
  --color-king-kong: #0e170a;
  --color-king-kong-50: #f0f8ed;
  --color-king-kong-100: #e6eee3;
  --color-king-kong-200: #d1dbcd;
  --color-king-kong-300: #bac5b5;
  --color-king-kong-400: #9aa695;
  --color-king-kong-500: #7c8877;
  --color-king-kong-600: #606b5b;
  --color-king-kong-700: #485244;
  --color-king-kong-800: #353d31;
  --color-king-kong-900: #242b22;
  --color-king-kong-950: #0e170a;
  --color-turtle-warrior: #3fb274;
  --color-turtle-warrior-50: #d3ffe1;
  --color-turtle-warrior-100: #b6f9ce;
  --color-turtle-warrior-200: #96e7b4;
  --color-turtle-warrior-300: #72d198;
  --color-turtle-warrior-400: #3fb274;
  --color-turtle-warrior-500: #18975b;
  --color-turtle-warrior-600: #007b47;
  --color-turtle-warrior-700: #006238;
  --color-turtle-warrior-800: #004d2b;
  --color-turtle-warrior-900: #003d20;
  --color-turtle-warrior-950: #002713;
  --color-crystal-gem: #6bcfa8;
  --color-crystal-gem-50: #c9ffe7;
  --color-crystal-gem-100: #b7f5da;
  --color-crystal-gem-200: #98e3c3;
  --color-crystal-gem-300: #6bcfa8;
  --color-crystal-gem-400: #4eb08b;
  --color-crystal-gem-500: #2a9571;
  --color-crystal-gem-600: #007b59;
  --color-crystal-gem-700: #006247;
  --color-crystal-gem-800: #004e37;
  --color-crystal-gem-900: #003d2b;
  --color-crystal-gem-950: #00271a;
  --color-pale-canary: #f3f09c;
  --color-pale-canary-50: #f9f8cb;
  --color-pale-canary-100: #f3f09c;
  --color-pale-canary-200: #dddb9f;
  --color-pale-canary-300: #c7c580;
  --color-pale-canary-400: #a9a657;
  --color-pale-canary-500: #8e8a37;
  --color-pale-canary-600: #736f19;
  --color-pale-canary-700: #5c5800;
  --color-pale-canary-800: #484500;
  --color-pale-canary-900: #373500;
  --color-pale-canary-950: #222100;
  --color-treetop-cathedral: #384a1e;
  --color-treetop-cathedral-50: #eefbdf;
  --color-treetop-cathedral-100: #e3f1d2;
  --color-treetop-cathedral-200: #cddfba;
  --color-treetop-cathedral-300: #b6c99f;
  --color-treetop-cathedral-400: #96aa7d;
  --color-treetop-cathedral-500: #7a8f60;
  --color-treetop-cathedral-600: #617448;
  --color-treetop-cathedral-700: #4b5d34;
  --color-treetop-cathedral-800: #384a1e;
  --color-treetop-cathedral-900: #2c381a;
  --color-treetop-cathedral-950: #1a230d;
}

Similar palettes