Treetop Cathedral to Puff of Pink color palette

274D26Treetop Cathedral 7D4D4BVeil of Cinder 9D7B97Amorous 6DADB3Blue Eye Samurai EEA895Creamy Peach FFCCEFPuff of Pink

Open in generator Export PNG, PDF, ASE…

About this palette

Treetop Cathedral to Puff of Pink is a 6-color warm, vintage palette: #274D26 (Treetop Cathedral), #7D4D4B (Veil of Cinder), #9D7B97 (Amorous), #6DADB3 (Blue Eye Samurai), #EEA895 (Creamy Peach), #FFCCEF (Puff of Pink). It mixes green, red, pink, turquoise tones and feels warm overall. The strongest text pairing is #274D26 on #FFCCEF with a contrast ratio of 6.96:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Treetop Cathedral	rgb(39, 77, 38)	hsl(118, 34%, 23%)
Veil of Cinder	rgb(125, 77, 75)	hsl(2, 25%, 39%)
Amorous	rgb(157, 123, 151)	hsl(311, 15%, 55%)
Blue Eye Samurai	rgb(109, 173, 179)	hsl(185, 32%, 56%)
Creamy Peach	rgb(238, 168, 149)	hsl(13, 72%, 76%)
Puff of Pink	rgb(255, 204, 239)	hsl(319, 100%, 90%)

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.

Aa6.96:1 Good#274D26 on #FFCCEF
Aa6.96:1 Good#FFCCEF on #274D26
Aa4.99:1 Good#7D4D4B on #FFCCEF
Aa4.99:1 Good#FFCCEF on #7D4D4B
Aa4.90:1 Good#274D26 on #EEA895
Aa4.90:1 Good#EEA895 on #274D26
Aa3.80:1 Poor#274D26 on #6DADB3
Aa3.80:1 Poor#6DADB3 on #274D26

Color blindness preview

CSS variables

/* Treetop Cathedral to Puff of Pink — https://swatchly.xyz/palette/274d26-7d4d4b-9d7b97-6dadb3-eea895-ffccef */
:root {
  --treetop-cathedral: #274d26;
  --veil-of-cinder: #7d4d4b;
  --amorous: #9d7b97;
  --blue-eye-samurai: #6dadb3;
  --creamy-peach: #eea895;
  --puff-of-pink: #ffccef;
}

Tailwind CSS v4

/* Treetop Cathedral to Puff of Pink — https://swatchly.xyz/palette/274d26-7d4d4b-9d7b97-6dadb3-eea895-ffccef */
@theme {
  --color-treetop-cathedral: #274d26;
  --color-treetop-cathedral-50: #e5fde3;
  --color-treetop-cathedral-100: #d9f4d7;
  --color-treetop-cathedral-200: #c2e2c0;
  --color-treetop-cathedral-300: #a8cda6;
  --color-treetop-cathedral-400: #86ae84;
  --color-treetop-cathedral-500: #6a9368;
  --color-treetop-cathedral-600: #51784f;
  --color-treetop-cathedral-700: #3c603b;
  --color-treetop-cathedral-800: #274d26;
  --color-treetop-cathedral-900: #203b1f;
  --color-treetop-cathedral-950: #122511;
  --color-veil-of-cinder: #7d4d4b;
  --color-veil-of-cinder-50: #fff2f1;
  --color-veil-of-cinder-100: #ffe4e2;
  --color-veil-of-cinder-200: #f7cdca;
  --color-veil-of-cinder-300: #e5b6b3;
  --color-veil-of-cinder-400: #ca9693;
  --color-veil-of-cinder-500: #af7c79;
  --color-veil-of-cinder-600: #946360;
  --color-veil-of-cinder-700: #7d4d4b;
  --color-veil-of-cinder-800: #633b3a;
  --color-veil-of-cinder-900: #4e2c2b;
  --color-veil-of-cinder-950: #331a19;
  --color-amorous: #9d7b97;
  --color-amorous-50: #fff0fc;
  --color-amorous-100: #fbe3f6;
  --color-amorous-200: #eacee5;
  --color-amorous-300: #d6b7d0;
  --color-amorous-400: #b896b2;
  --color-amorous-500: #9d7b97;
  --color-amorous-600: #81617c;
  --color-amorous-700: #684b63;
  --color-amorous-800: #53394e;
  --color-amorous-900: #402b3d;
  --color-amorous-950: #291926;
  --color-blue-eye-samurai: #6dadb3;
  --color-blue-eye-samurai-50: #dcfcff;
  --color-blue-eye-samurai-100: #ccf3f7;
  --color-blue-eye-samurai-200: #b2e1e5;
  --color-blue-eye-samurai-300: #95cbd0;
  --color-blue-eye-samurai-400: #6dadb3;
  --color-blue-eye-samurai-500: #529197;
  --color-blue-eye-samurai-600: #37767c;
  --color-blue-eye-samurai-700: #235f64;
  --color-blue-eye-samurai-800: #144b4f;
  --color-blue-eye-samurai-900: #0a3a3e;
  --color-blue-eye-samurai-950: #032427;
  --color-creamy-peach: #eea895;
  --color-creamy-peach-50: #ffeeea;
  --color-creamy-peach-100: #ffe0d7;
  --color-creamy-peach-200: #fcc4b5;
  --color-creamy-peach-300: #eea895;
  --color-creamy-peach-400: #cc8b79;
  --color-creamy-peach-500: #b1705e;
  --color-creamy-peach-600: #945746;
  --color-creamy-peach-700: #7a4234;
  --color-creamy-peach-800: #623225;
  --color-creamy-peach-900: #4f251b;
  --color-creamy-peach-950: #33160e;
  --color-puff-of-pink: #ffccef;
  --color-puff-of-pink-50: #fff7fc;
  --color-puff-of-pink-100: #ffe9f8;
  --color-puff-of-pink-200: #ffccef;
  --color-puff-of-pink-300: #e1b8d4;
  --color-puff-of-pink-400: #c395b5;
  --color-puff-of-pink-500: #a67899;
  --color-puff-of-pink-600: #895d7c;
  --color-puff-of-pink-700: #6f4763;
  --color-puff-of-pink-800: #57354e;
  --color-puff-of-pink-900: #45283c;
  --color-puff-of-pink-950: #2c1726;
}