Hazy Moon to Philodendron Color Palette

About this palette

Hazy Moon to Philodendron is a 5-color cool, earthy, vintage, gradient palette: #EEDDA1 (Hazy Moon), #B9BD8F (Beige and Sage), #849E7D (Basswood Green), #4F806A (Clouded Pine), #006258 (Philodendron). It mixes yellow, green, turquoise tones and feels cool overall. The strongest text pairing is #EEDDA1 on #006258 with a contrast ratio of 5.36:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hazy Moon	rgb(238, 221, 161)	hsl(47, 69%, 78%)
Beige and Sage	rgb(185, 189, 143)	hsl(65, 26%, 65%)
Basswood Green	rgb(132, 158, 125)	hsl(107, 15%, 55%)
Clouded Pine	rgb(79, 128, 106)	hsl(153, 24%, 41%)
Philodendron	rgb(0, 98, 88)	hsl(174, 100%, 19%)

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.

Aa5.36:1 Good#EEDDA1 on #006258
Aa5.36:1 Good#006258 on #EEDDA1
Aa3.72:1 Poor#B9BD8F on #006258
Aa3.72:1 Poor#006258 on #B9BD8F
Aa3.35:1 Poor#EEDDA1 on #4F806A
Aa3.35:1 Poor#4F806A on #EEDDA1

Color blindness preview

CSS variables

/* Hazy Moon to Philodendron — https://swatchly.xyz/palette/eedda1-b9bd8f-849e7d-4f806a-006258 */
:root {
  --hazy-moon: #eedda1;
  --beige-and-sage: #b9bd8f;
  --basswood-green: #849e7d;
  --clouded-pine: #4f806a;
  --philodendron: #006258;
}

Tailwind CSS v4

/* Hazy Moon to Philodendron — https://swatchly.xyz/palette/eedda1-b9bd8f-849e7d-4f806a-006258 */
@theme {
  --color-hazy-moon: #eedda1;
  --color-hazy-moon-50: #fff9e4;
  --color-hazy-moon-100: #faf0cd;
  --color-hazy-moon-200: #eedda1;
  --color-hazy-moon-300: #d3c595;
  --color-hazy-moon-400: #b4a56e;
  --color-hazy-moon-500: #98884f;
  --color-hazy-moon-600: #7c6d34;
  --color-hazy-moon-700: #635520;
  --color-hazy-moon-800: #4e4112;
  --color-hazy-moon-900: #3d3208;
  --color-hazy-moon-950: #261f03;
  --color-beige-and-sage: #b9bd8f;
  --color-beige-and-sage-50: #f1f4d8;
  --color-beige-and-sage-100: #e5e9ca;
  --color-beige-and-sage-200: #d1d4b0;
  --color-beige-and-sage-300: #b9bd8f;
  --color-beige-and-sage-400: #9b9f73;
  --color-beige-and-sage-500: #828559;
  --color-beige-and-sage-600: #696c42;
  --color-beige-and-sage-700: #535630;
  --color-beige-and-sage-800: #424422;
  --color-beige-and-sage-900: #333518;
  --color-beige-and-sage-950: #20210c;
  --color-basswood-green: #849e7d;
  --color-basswood-green-50: #e6f6e2;
  --color-basswood-green-100: #d9ebd4;
  --color-basswood-green-200: #c1d6bb;
  --color-basswood-green-300: #a6bfa0;
  --color-basswood-green-400: #849e7d;
  --color-basswood-green-500: #6b8565;
  --color-basswood-green-600: #546c4e;
  --color-basswood-green-700: #41573c;
  --color-basswood-green-800: #32452d;
  --color-basswood-green-900: #263622;
  --color-basswood-green-950: #172314;
  --color-clouded-pine: #4f806a;
  --color-clouded-pine-50: #e1fdef;
  --color-clouded-pine-100: #d6f5e6;
  --color-clouded-pine-200: #c0e5d3;
  --color-clouded-pine-300: #a6d1bc;
  --color-clouded-pine-400: #84b49d;
  --color-clouded-pine-500: #689a83;
  --color-clouded-pine-600: #4f806a;
  --color-clouded-pine-700: #396753;
  --color-clouded-pine-800: #28513f;
  --color-clouded-pine-900: #1b3e30;
  --color-clouded-pine-950: #0e271d;
  --color-philodendron: #006258;
  --color-philodendron-50: #d7fff8;
  --color-philodendron-100: #c8f7ee;
  --color-philodendron-200: #ace5db;
  --color-philodendron-300: #8ecfc4;
  --color-philodendron-400: #67b1a5;
  --color-philodendron-500: #47958a;
  --color-philodendron-600: #2a796f;
  --color-philodendron-700: #006258;
  --color-philodendron-800: #024d45;
  --color-philodendron-900: #003b35;
  --color-philodendron-950: #002521;
}