Treetop Cathedral to Droplet color palette

2F460ETreetop Cathedral 844E92Prunella AA6EBELavendless D88D6FCopper Coin A0DBFFDroplet

About this palette

Treetop Cathedral to Droplet is a 5-color cool palette: #2F460E (Treetop Cathedral), #844E92 (Prunella), #AA6EBE (Lavendless), #D88D6F (Copper Coin), #A0DBFF (Droplet). It mixes green, purple, orange, blue tones and feels cool overall. The strongest text pairing is #2F460E on #A0DBFF with a contrast ratio of 7.02:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Treetop Cathedral	rgb(47, 70, 14)	hsl(85, 67%, 16%)
Prunella	rgb(132, 78, 146)	hsl(288, 30%, 44%)
Lavendless	rgb(170, 110, 190)	hsl(285, 38%, 59%)
Copper Coin	rgb(216, 141, 111)	hsl(17, 57%, 64%)
Droplet	rgb(160, 219, 255)	hsl(203, 100%, 81%)

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.02:1 Very good#2F460E on #A0DBFF
Aa7.02:1 Very good#A0DBFF on #2F460E
Aa4.04:1 Poor#844E92 on #A0DBFF
Aa4.04:1 Poor#A0DBFF on #844E92
Aa3.97:1 Poor#2F460E on #D88D6F
Aa3.97:1 Poor#D88D6F on #2F460E

Color blindness preview

CSS variables

/* Treetop Cathedral to Droplet — https://swatchly.xyz/palette/2f460e-844e92-aa6ebe-d88d6f-a0dbff */
:root {
  --treetop-cathedral: #2f460e;
  --prunella: #844e92;
  --lavendless: #aa6ebe;
  --copper-coin: #d88d6f;
  --droplet: #a0dbff;
}

Tailwind CSS v4

/* Treetop Cathedral to Droplet — https://swatchly.xyz/palette/2f460e-844e92-aa6ebe-d88d6f-a0dbff */
@theme {
  --color-treetop-cathedral: #2f460e;
  --color-treetop-cathedral-50: #ebfcdb;
  --color-treetop-cathedral-100: #e0f3ce;
  --color-treetop-cathedral-200: #cae0b5;
  --color-treetop-cathedral-300: #b1ca98;
  --color-treetop-cathedral-400: #8faa73;
  --color-treetop-cathedral-500: #738e56;
  --color-treetop-cathedral-600: #59723d;
  --color-treetop-cathedral-700: #435a29;
  --color-treetop-cathedral-800: #2f460e;
  --color-treetop-cathedral-900: #253511;
  --color-treetop-cathedral-950: #152108;
  --color-prunella: #844e92;
  --color-prunella-50: #fcf1ff;
  --color-prunella-100: #f9e1ff;
  --color-prunella-200: #f0c3fc;
  --color-prunella-300: #dba9e9;
  --color-prunella-400: #bd86cc;
  --color-prunella-500: #a169af;
  --color-prunella-600: #844e92;
  --color-prunella-700: #6b3b77;
  --color-prunella-800: #552c60;
  --color-prunella-900: #43204c;
  --color-prunella-950: #2b1231;
  --color-lavendless: #aa6ebe;
  --color-lavendless-50: #fcf2ff;
  --color-lavendless-100: #f8e4ff;
  --color-lavendless-200: #f1c8ff;
  --color-lavendless-300: #e1adf3;
  --color-lavendless-400: #c58ad8;
  --color-lavendless-500: #aa6ebe;
  --color-lavendless-600: #8d53a0;
  --color-lavendless-700: #733e84;
  --color-lavendless-800: #5c2d6b;
  --color-lavendless-900: #482054;
  --color-lavendless-950: #2e1137;
  --color-copper-coin: #d88d6f;
  --color-copper-coin-50: #fff2ee;
  --color-copper-coin-100: #ffe5dc;
  --color-copper-coin-200: #ffcbb6;
  --color-copper-coin-300: #f2b096;
  --color-copper-coin-400: #d88d6f;
  --color-copper-coin-500: #ba7254;
  --color-copper-coin-600: #9c573b;
  --color-copper-coin-700: #804228;
  --color-copper-coin-800: #67311a;
  --color-copper-coin-900: #522410;
  --color-copper-coin-950: #351406;
  --color-droplet: #a0dbff;
  --color-droplet-50: #e4f4ff;
  --color-droplet-100: #cdecff;
  --color-droplet-200: #a0dbff;
  --color-droplet-300: #92c4e3;
  --color-droplet-400: #6fa6c7;
  --color-droplet-500: #528bac;
  --color-droplet-600: #3a7191;
  --color-droplet-700: #275b77;
  --color-droplet-800: #184760;
  --color-droplet-900: #0e374c;
  --color-droplet-950: #052231;
}