Jittery Jade to Pineapple Color Palette

About this palette

Jittery Jade to Pineapple is a 5-color warm palette: #73F2C5 (Jittery Jade), #86B5FF (Fly Away), #E154B3 (Barbiecore), #8E6800 (Muddy Brown), #4F3A00 (Pineapple). It mixes turquoise, blue, pink, brown tones and feels warm overall. The strongest text pairing is #73F2C5 on #4F3A00 with a contrast ratio of 7.86:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jittery Jade	rgb(115, 242, 197)	hsl(159, 83%, 70%)
Fly Away	rgb(134, 181, 255)	hsl(217, 100%, 76%)
Barbiecore	rgb(225, 84, 179)	hsl(320, 70%, 61%)
Muddy Brown	rgb(142, 104, 0)	hsl(44, 100%, 28%)
Pineapple	rgb(79, 58, 0)	hsl(44, 100%, 15%)

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.

Aa7.86:1 Very good#73F2C5 on #4F3A00
Aa7.86:1 Very good#4F3A00 on #73F2C5
Aa5.20:1 Good#86B5FF on #4F3A00
Aa5.20:1 Good#4F3A00 on #86B5FF
Aa3.69:1 Poor#73F2C5 on #8E6800
Aa3.69:1 Poor#8E6800 on #73F2C5
Aa3.16:1 Poor#E154B3 on #4F3A00
Aa3.16:1 Poor#4F3A00 on #E154B3

Color blindness preview

CSS variables

/* Jittery Jade to Pineapple — https://swatchly.xyz/palette/73f2c5-86b5ff-e154b3-8e6800-4f3a00 */
:root {
  --jittery-jade: #73f2c5;
  --fly-away: #86b5ff;
  --barbiecore: #e154b3;
  --muddy-brown: #8e6800;
  --pineapple: #4f3a00;
}

Tailwind CSS v4

/* Jittery Jade to Pineapple — https://swatchly.xyz/palette/73f2c5-86b5ff-e154b3-8e6800-4f3a00 */
@theme {
  --color-jittery-jade: #73f2c5;
  --color-jittery-jade-50: #d8ffee;
  --color-jittery-jade-100: #b4fcdf;
  --color-jittery-jade-200: #73f2c5;
  --color-jittery-jade-300: #6fd7b1;
  --color-jittery-jade-400: #3aba91;
  --color-jittery-jade-500: #009d76;
  --color-jittery-jade-600: #007f5f;
  --color-jittery-jade-700: #00654b;
  --color-jittery-jade-800: #004f3a;
  --color-jittery-jade-900: #003d2c;
  --color-jittery-jade-950: #00261a;
  --color-fly-away: #86b5ff;
  --color-fly-away-50: #e5efff;
  --color-fly-away-100: #d2e3ff;
  --color-fly-away-200: #afceff;
  --color-fly-away-300: #86b5ff;
  --color-fly-away-400: #6b98de;
  --color-fly-away-500: #527ec4;
  --color-fly-away-600: #3c65a7;
  --color-fly-away-700: #2b508c;
  --color-fly-away-800: #1e3f74;
  --color-fly-away-900: #15315f;
  --color-fly-away-950: #0a1e3f;
  --color-barbiecore: #e154b3;
  --color-barbiecore-50: #fff4fa;
  --color-barbiecore-100: #ffe8f5;
  --color-barbiecore-200: #ffcdea;
  --color-barbiecore-300: #ffabde;
  --color-barbiecore-400: #fa75cc;
  --color-barbiecore-500: #e154b3;
  --color-barbiecore-600: #bf3395;
  --color-barbiecore-700: #9e1579;
  --color-barbiecore-800: #800060;
  --color-barbiecore-900: #630049;
  --color-barbiecore-950: #3f002e;
  --color-muddy-brown: #8e6800;
  --color-muddy-brown-50: #fff4df;
  --color-muddy-brown-100: #ffe9c0;
  --color-muddy-brown-200: #f3d59b;
  --color-muddy-brown-300: #e0be7b;
  --color-muddy-brown-400: #c49e50;
  --color-muddy-brown-500: #a9822d;
  --color-muddy-brown-600: #8e6800;
  --color-muddy-brown-700: #715200;
  --color-muddy-brown-800: #594000;
  --color-muddy-brown-900: #453000;
  --color-muddy-brown-950: #2c1d00;
  --color-pineapple: #4f3a00;
  --color-pineapple-50: #fff4dd;
  --color-pineapple-100: #f9eac9;
  --color-pineapple-200: #e8d6af;
  --color-pineapple-300: #d2be91;
  --color-pineapple-400: #b49d6c;
  --color-pineapple-500: #98804e;
  --color-pineapple-600: #7b6534;
  --color-pineapple-700: #624e21;
  --color-pineapple-800: #4f3a00;
  --color-pineapple-900: #3b2d0b;
  --color-pineapple-950: #251b04;
}