Start generating

Treetop Cathedral to Lama color palette

2E4D11Treetop Cathedral1D2B14Lindworm GreenFFF7F1Seashell4A9FD7Sub-Zero7B5C8EMuted PurpleDBBB9ELama
Open in generator Export PNG, PDF, ASE…

About this palette

Treetop Cathedral to Lama is a 6-color cool palette: #2E4D11 (Treetop Cathedral), #1D2B14 (Lindworm Green), #FFF7F1 (Seashell), #4A9FD7 (Sub-Zero), #7B5C8E (Muted Purple), #DBBB9E (Lama). It mixes green, white, blue, purple, orange tones and feels cool overall. The strongest text pairing is #1D2B14 on #FFF7F1 with a contrast ratio of 14.08:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Treetop Cathedralrgb(46, 77, 17)hsl(91, 64%, 18%)
Lindworm Greenrgb(29, 43, 20)hsl(97, 37%, 12%)
Seashellrgb(255, 247, 241)hsl(26, 100%, 97%)
Sub-Zerorgb(74, 159, 215)hsl(204, 64%, 57%)
Muted Purplergb(123, 92, 142)hsl(277, 21%, 46%)
Lamargb(219, 187, 158)hsl(29, 46%, 74%)

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.

  • Aa14.08:1 Super#1D2B14 on #FFF7F1
  • Aa14.08:1 Super#FFF7F1 on #1D2B14
  • Aa9.07:1 Very good#2E4D11 on #FFF7F1
  • Aa9.07:1 Very good#FFF7F1 on #2E4D11
  • Aa8.25:1 Very good#1D2B14 on #DBBB9E
  • Aa8.25:1 Very good#DBBB9E on #1D2B14
  • Aa5.31:1 Good#2E4D11 on #DBBB9E
  • Aa5.31:1 Good#DBBB9E on #2E4D11

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Treetop Cathedral to Lama — https://swatchly.xyz/palette/2e4d11-1d2b14-fff7f1-4a9fd7-7b5c8e-dbbb9e */
:root {
  --treetop-cathedral: #2e4d11;
  --lindworm-green: #1d2b14;
  --seashell: #fff7f1;
  --sub-zero: #4a9fd7;
  --muted-purple: #7b5c8e;
  --lama: #dbbb9e;
}

Tailwind CSS v4

/* Treetop Cathedral to Lama — https://swatchly.xyz/palette/2e4d11-1d2b14-fff7f1-4a9fd7-7b5c8e-dbbb9e */
@theme {
  --color-treetop-cathedral: #2e4d11;
  --color-treetop-cathedral-50: #e8fdda;
  --color-treetop-cathedral-100: #dcf4cd;
  --color-treetop-cathedral-200: #c6e2b3;
  --color-treetop-cathedral-300: #adcd98;
  --color-treetop-cathedral-400: #8cae74;
  --color-treetop-cathedral-500: #709357;
  --color-treetop-cathedral-600: #57783e;
  --color-treetop-cathedral-700: #42602b;
  --color-treetop-cathedral-800: #2e4d11;
  --color-treetop-cathedral-900: #253b12;
  --color-treetop-cathedral-950: #152508;
  --color-lindworm-green: #1d2b14;
  --color-lindworm-green-50: #eff9e9;
  --color-lindworm-green-100: #e4f0dd;
  --color-lindworm-green-200: #cfddc7;
  --color-lindworm-green-300: #b7c7ae;
  --color-lindworm-green-400: #97a88d;
  --color-lindworm-green-500: #7d8e73;
  --color-lindworm-green-600: #64755b;
  --color-lindworm-green-700: #505f47;
  --color-lindworm-green-800: #3f4c37;
  --color-lindworm-green-900: #323d2b;
  --color-lindworm-green-950: #1d2b14;
  --color-seashell: #fff7f1;
  --color-seashell-50: #fff7f1;
  --color-seashell-100: #f2ede9;
  --color-seashell-200: #ded9d4;
  --color-seashell-300: #c8c1bc;
  --color-seashell-400: #a8a19c;
  --color-seashell-500: #8c8580;
  --color-seashell-600: #716a65;
  --color-seashell-700: #5a544f;
  --color-seashell-800: #46413d;
  --color-seashell-900: #36322e;
  --color-seashell-950: #221f1c;
  --color-sub-zero: #4a9fd7;
  --color-sub-zero-50: #e4f4ff;
  --color-sub-zero-100: #cdeaff;
  --color-sub-zero-200: #a1d7ff;
  --color-sub-zero-300: #77c0f4;
  --color-sub-zero-400: #4a9fd7;
  --color-sub-zero-500: #2d85bb;
  --color-sub-zero-600: #0b6c9f;
  --color-sub-zero-700: #005681;
  --color-sub-zero-800: #004467;
  --color-sub-zero-900: #003552;
  --color-sub-zero-950: #002237;
  --color-muted-purple: #7b5c8e;
  --color-muted-purple-50: #faf2ff;
  --color-muted-purple-100: #f4e4ff;
  --color-muted-purple-200: #e5ccf6;
  --color-muted-purple-300: #d0b3e3;
  --color-muted-purple-400: #b292c6;
  --color-muted-purple-500: #9676aa;
  --color-muted-purple-600: #7b5c8e;
  --color-muted-purple-700: #634774;
  --color-muted-purple-800: #4e365d;
  --color-muted-purple-900: #3d2849;
  --color-muted-purple-950: #26182f;
  --color-lama: #dbbb9e;
  --color-lama-50: #fff3e9;
  --color-lama-100: #fce8d5;
  --color-lama-200: #ebd3be;
  --color-lama-300: #dbbb9e;
  --color-lama-400: #ba9c81;
  --color-lama-500: #9e8065;
  --color-lama-600: #82664c;
  --color-lama-700: #695038;
  --color-lama-800: #543d28;
  --color-lama-900: #412e1d;
  --color-lama-950: #2a1c0f;
}

Similar palettes