Start generating

Pineapple to Purple’s Baby Sister color palette

4A3B00Pineapple6A5700Ayahuasca Vine49945AEucalyptus87A5F7Fennel FlowerF0BEEFPurple’s Baby Sister
Open in generator Export PNG, PDF, ASE…

About this palette

Pineapple to Purple’s Baby Sister is a 5-color cool, earthy, vintage palette: #4A3B00 (Pineapple), #6A5700 (Ayahuasca Vine), #49945A (Eucalyptus), #87A5F7 (Fennel Flower), #F0BEEF (Purple’s Baby Sister). It mixes brown, green, blue, pink tones and feels cool overall. The strongest text pairing is #4A3B00 on #F0BEEF with a contrast ratio of 6.95:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pineapplergb(74, 59, 0)hsl(48, 100%, 15%)
Ayahuasca Vinergb(106, 87, 0)hsl(49, 100%, 21%)
Eucalyptusrgb(73, 148, 90)hsl(134, 34%, 43%)
Fennel Flowerrgb(135, 165, 247)hsl(224, 88%, 75%)
Purple’s Baby Sisterrgb(240, 190, 239)hsl(301, 62%, 84%)

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.95:1 Good#4A3B00 on #F0BEEF
  • Aa6.95:1 Good#F0BEEF on #4A3B00
  • Aa4.57:1 Good#4A3B00 on #87A5F7
  • Aa4.57:1 Good#87A5F7 on #4A3B00
  • Aa4.47:1 Poor#6A5700 on #F0BEEF
  • Aa4.47:1 Poor#F0BEEF on #6A5700

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pineapple to Purple’s Baby Sister — https://swatchly.xyz/palette/4a3b00-6a5700-49945a-87a5f7-f0beef */
:root {
  --pineapple: #4a3b00;
  --ayahuasca-vine: #6a5700;
  --eucalyptus: #49945a;
  --fennel-flower: #87a5f7;
  --purple-s-baby-sister: #f0beef;
}

Tailwind CSS v4

/* Pineapple to Purple’s Baby Sister — https://swatchly.xyz/palette/4a3b00-6a5700-49945a-87a5f7-f0beef */
@theme {
  --color-pineapple: #4a3b00;
  --color-pineapple-50: #fef5d7;
  --color-pineapple-100: #f6ebca;
  --color-pineapple-200: #e4d7af;
  --color-pineapple-300: #cebf92;
  --color-pineapple-400: #ae9f6c;
  --color-pineapple-500: #92824e;
  --color-pineapple-600: #766735;
  --color-pineapple-700: #5d4f21;
  --color-pineapple-800: #4a3b00;
  --color-pineapple-900: #372d0b;
  --color-pineapple-950: #221b04;
  --color-ayahuasca-vine: #6a5700;
  --color-ayahuasca-vine-50: #fff5d3;
  --color-ayahuasca-vine-100: #f8ebbf;
  --color-ayahuasca-vine-200: #e7d8a4;
  --color-ayahuasca-vine-300: #d3c286;
  --color-ayahuasca-vine-400: #b6a35f;
  --color-ayahuasca-vine-500: #9b8840;
  --color-ayahuasca-vine-600: #806d25;
  --color-ayahuasca-vine-700: #6a5700;
  --color-ayahuasca-vine-800: #534400;
  --color-ayahuasca-vine-900: #403400;
  --color-ayahuasca-vine-950: #292000;
  --color-eucalyptus: #49945a;
  --color-eucalyptus-50: #dcffe1;
  --color-eucalyptus-100: #c8f8cf;
  --color-eucalyptus-200: #ade5b6;
  --color-eucalyptus-300: #8fd09a;
  --color-eucalyptus-400: #68b177;
  --color-eucalyptus-500: #49945a;
  --color-eucalyptus-600: #2f7942;
  --color-eucalyptus-700: #1c6230;
  --color-eucalyptus-800: #0d4d22;
  --color-eucalyptus-900: #043d17;
  --color-eucalyptus-950: #01270c;
  --color-fennel-flower: #87a5f7;
  --color-fennel-flower-50: #f4f8ff;
  --color-fennel-flower-100: #e8efff;
  --color-fennel-flower-200: #cedcff;
  --color-fennel-flower-300: #afc6ff;
  --color-fennel-flower-400: #87a5f7;
  --color-fennel-flower-500: #6c88d7;
  --color-fennel-flower-600: #516bb8;
  --color-fennel-flower-700: #3d5399;
  --color-fennel-flower-800: #2c407c;
  --color-fennel-flower-900: #202f63;
  --color-fennel-flower-950: #111c40;
  --color-purple-s-baby-sister: #f0beef;
  --color-purple-s-baby-sister-50: #ffe9fe;
  --color-purple-s-baby-sister-100: #fbdafa;
  --color-purple-s-baby-sister-200: #f0beef;
  --color-purple-s-baby-sister-300: #d6abd5;
  --color-purple-s-baby-sister-400: #b98cb9;
  --color-purple-s-baby-sister-500: #9f719e;
  --color-purple-s-baby-sister-600: #845883;
  --color-purple-s-baby-sister-700: #6b446b;
  --color-purple-s-baby-sister-800: #563456;
  --color-purple-s-baby-sister-900: #442644;
  --color-purple-s-baby-sister-950: #2b162b;
}

Similar palettes