Green Glint to Halo Color Palette

About this palette

Green Glint to Halo is a 4-color pastel, light palette: #DAF4C3 (Green Glint), #FFDDC1 (Persian Melon), #E8CFFB (Bubblegum Crisis), #DBC797 (Halo). It mixes green, orange, purple, yellow tones and feels balanced overall. The strongest text pairing is #DAF4C3 on #DBC797 with a contrast ratio of 1.40:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Green Glint	rgb(218, 244, 195)	hsl(92, 69%, 86%)
Persian Melon	rgb(255, 221, 193)	hsl(27, 100%, 88%)
Bubblegum Crisis	rgb(232, 207, 251)	hsl(274, 85%, 90%)
Halo	rgb(219, 199, 151)	hsl(42, 49%, 73%)

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.

Color blindness preview

CSS variables

/* Green Glint to Halo — https://swatchly.xyz/palette/daf4c3-ffddc1-e8cffb-dbc797 */
:root {
  --green-glint: #daf4c3;
  --persian-melon: #ffddc1;
  --bubblegum-crisis: #e8cffb;
  --halo: #dbc797;
}

Tailwind CSS v4

/* Green Glint to Halo — https://swatchly.xyz/palette/daf4c3-ffddc1-e8cffb-dbc797 */
@theme {
  --color-green-glint: #daf4c3;
  --color-green-glint-50: #ebfadf;
  --color-green-glint-100: #daf4c3;
  --color-green-glint-200: #cbdeba;
  --color-green-glint-300: #b3c8a0;
  --color-green-glint-400: #93aa7e;
  --color-green-glint-500: #778f62;
  --color-green-glint-600: #5e7449;
  --color-green-glint-700: #495d36;
  --color-green-glint-800: #384926;
  --color-green-glint-900: #2a381b;
  --color-green-glint-950: #19230e;
  --color-persian-melon: #ffddc1;
  --color-persian-melon-50: #ffebdb;
  --color-persian-melon-100: #ffddc1;
  --color-persian-melon-200: #e6ccb7;
  --color-persian-melon-300: #d3b69f;
  --color-persian-melon-400: #b6987e;
  --color-persian-melon-500: #9c7d64;
  --color-persian-melon-600: #81644c;
  --color-persian-melon-700: #694f39;
  --color-persian-melon-800: #543d29;
  --color-persian-melon-900: #412e1e;
  --color-persian-melon-950: #2a1c10;
  --color-bubblegum-crisis: #e8cffb;
  --color-bubblegum-crisis-50: #faf4ff;
  --color-bubblegum-crisis-100: #f5e8ff;
  --color-bubblegum-crisis-200: #e8cffb;
  --color-bubblegum-crisis-300: #cfbade;
  --color-bubblegum-crisis-400: #b099c1;
  --color-bubblegum-crisis-500: #947da5;
  --color-bubblegum-crisis-600: #786289;
  --color-bubblegum-crisis-700: #604c6f;
  --color-bubblegum-crisis-800: #4c3a58;
  --color-bubblegum-crisis-900: #3b2c45;
  --color-bubblegum-crisis-950: #251a2c;
  --color-halo: #dbc797;
  --color-halo-50: #fff9ea;
  --color-halo-100: #fcf0d4;
  --color-halo-200: #ebddbb;
  --color-halo-300: #dbc797;
  --color-halo-400: #b8a67a;
  --color-halo-500: #9c895b;
  --color-halo-600: #7f6d41;
  --color-halo-700: #66562c;
  --color-halo-800: #50421d;
  --color-halo-900: #3d3112;
  --color-halo-950: #271e08;
}