Girl Crush to Sprig of Sage Color Palette

About this palette

Girl Crush to Sprig of Sage is a 4-color pastel, light palette: #DABFDE (Girl Crush), #D6CCA6 (Fiji Sands), #EFE4AC (Vanilla), #F1F9D9 (Sprig of Sage). It mixes purple, yellow, white tones and feels balanced overall. The strongest text pairing is #DABFDE on #F1F9D9 with a contrast ratio of 1.54:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Girl Crush	rgb(218, 191, 222)	hsl(292, 32%, 81%)
Fiji Sands	rgb(214, 204, 166)	hsl(48, 37%, 75%)
Vanilla	rgb(239, 228, 172)	hsl(50, 68%, 81%)
Sprig of Sage	rgb(241, 249, 217)	hsl(75, 73%, 91%)

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

/* Girl Crush to Sprig of Sage — https://swatchly.xyz/palette/dabfde-d6cca6-efe4ac-f1f9d9 */
:root {
  --girl-crush: #dabfde;
  --fiji-sands: #d6cca6;
  --vanilla: #efe4ac;
  --sprig-of-sage: #f1f9d9;
}

Tailwind CSS v4

/* Girl Crush to Sprig of Sage — https://swatchly.xyz/palette/dabfde-d6cca6-efe4ac-f1f9d9 */
@theme {
  --color-girl-crush: #dabfde;
  --color-girl-crush-50: #fef7ff;
  --color-girl-crush-100: #fbebfd;
  --color-girl-crush-200: #ebd7ed;
  --color-girl-crush-300: #dabfde;
  --color-girl-crush-400: #b79fbb;
  --color-girl-crush-500: #9b829e;
  --color-girl-crush-600: #7e6682;
  --color-girl-crush-700: #654f68;
  --color-girl-crush-800: #4f3c52;
  --color-girl-crush-900: #3c2c3f;
  --color-girl-crush-950: #261b28;
  --color-fiji-sands: #d6cca6;
  --color-fiji-sands-50: #fffbeb;
  --color-fiji-sands-100: #f9f3dd;
  --color-fiji-sands-200: #e8e1c7;
  --color-fiji-sands-300: #d6cca6;
  --color-fiji-sands-400: #b4aa88;
  --color-fiji-sands-500: #968d69;
  --color-fiji-sands-600: #7a714e;
  --color-fiji-sands-700: #615839;
  --color-fiji-sands-800: #4b4428;
  --color-fiji-sands-900: #39331b;
  --color-fiji-sands-950: #241f0e;
  --color-vanilla: #efe4ac;
  --color-vanilla-50: #f5efce;
  --color-vanilla-100: #efe4ac;
  --color-vanilla-200: #dad2a7;
  --color-vanilla-300: #c6bd8d;
  --color-vanilla-400: #a99e6b;
  --color-vanilla-500: #8f8450;
  --color-vanilla-600: #756b38;
  --color-vanilla-700: #5f5626;
  --color-vanilla-800: #4b4318;
  --color-vanilla-900: #3a330e;
  --color-vanilla-950: #241f05;
  --color-sprig-of-sage: #f1f9d9;
  --color-sprig-of-sage-50: #f1f9d9;
  --color-sprig-of-sage-100: #e8edda;
  --color-sprig-of-sage-200: #d4dac3;
  --color-sprig-of-sage-300: #bec4aa;
  --color-sprig-of-sage-400: #9ea589;
  --color-sprig-of-sage-500: #838a6d;
  --color-sprig-of-sage-600: #696f54;
  --color-sprig-of-sage-700: #535940;
  --color-sprig-of-sage-800: #40452f;
  --color-sprig-of-sage-900: #313523;
  --color-sprig-of-sage-950: #1e2114;
}