Sugar Milk to Jewel Weed Color Palette

About this palette

Sugar Milk to Jewel Weed is a 5-color muted, cool palette: #FFF7F2 (Sugar Milk), #13312C (Elite Teal), #655B80 (Berry Jam), #D7AD86 (Porcini), #50A496 (Jewel Weed). It mixes white, turquoise, purple, orange tones and feels cool overall. The strongest text pairing is #FFF7F2 on #13312C with a contrast ratio of 13.20:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugar Milk	rgb(255, 247, 242)	hsl(23, 100%, 97%)
Elite Teal	rgb(19, 49, 44)	hsl(170, 44%, 13%)
Berry Jam	rgb(101, 91, 128)	hsl(256, 17%, 43%)
Porcini	rgb(215, 173, 134)	hsl(29, 50%, 68%)
Jewel Weed	rgb(80, 164, 150)	hsl(170, 34%, 48%)

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.

Aa13.20:1 Super#FFF7F2 on #13312C
Aa13.20:1 Super#13312C on #FFF7F2
Aa6.79:1 Good#13312C on #D7AD86
Aa6.79:1 Good#D7AD86 on #13312C
Aa5.90:1 Good#FFF7F2 on #655B80
Aa5.90:1 Good#655B80 on #FFF7F2
Aa4.72:1 Good#13312C on #50A496
Aa4.72:1 Good#50A496 on #13312C

Color blindness preview

CSS variables

/* Sugar Milk to Jewel Weed — https://swatchly.xyz/palette/fff7f2-13312c-655b80-d7ad86-50a496 */
:root {
  --sugar-milk: #fff7f2;
  --elite-teal: #13312c;
  --berry-jam: #655b80;
  --porcini: #d7ad86;
  --jewel-weed: #50a496;
}

Tailwind CSS v4

/* Sugar Milk to Jewel Weed — https://swatchly.xyz/palette/fff7f2-13312c-655b80-d7ad86-50a496 */
@theme {
  --color-sugar-milk: #fff7f2;
  --color-sugar-milk-50: #fff7f2;
  --color-sugar-milk-100: #f2edea;
  --color-sugar-milk-200: #ded9d5;
  --color-sugar-milk-300: #c8c1bd;
  --color-sugar-milk-400: #a8a19d;
  --color-sugar-milk-500: #8c8581;
  --color-sugar-milk-600: #716a66;
  --color-sugar-milk-700: #5a5450;
  --color-sugar-milk-800: #46413e;
  --color-sugar-milk-900: #36322f;
  --color-sugar-milk-950: #221f1c;
  --color-elite-teal: #13312c;
  --color-elite-teal-50: #e7faf6;
  --color-elite-teal-100: #dbf1ec;
  --color-elite-teal-200: #c5ded8;
  --color-elite-teal-300: #acc8c2;
  --color-elite-teal-400: #88a8a1;
  --color-elite-teal-500: #6b8b84;
  --color-elite-teal-600: #506e68;
  --color-elite-teal-700: #3b5651;
  --color-elite-teal-800: #2a413c;
  --color-elite-teal-900: #13312c;
  --color-elite-teal-950: #0f1c1a;
  --color-berry-jam: #655b80;
  --color-berry-jam-50: #f6f3ff;
  --color-berry-jam-100: #ebe5ff;
  --color-berry-jam-200: #d6ceef;
  --color-berry-jam-300: #beb5da;
  --color-berry-jam-400: #9d93bb;
  --color-berry-jam-500: #81779d;
  --color-berry-jam-600: #655b80;
  --color-berry-jam-700: #504767;
  --color-berry-jam-800: #3f3753;
  --color-berry-jam-900: #302a41;
  --color-berry-jam-950: #1e192a;
  --color-porcini: #d7ad86;
  --color-porcini-50: #ffecda;
  --color-porcini-100: #fbdec3;
  --color-porcini-200: #e9c7a8;
  --color-porcini-300: #d7ad86;
  --color-porcini-400: #b8906b;
  --color-porcini-500: #9e7651;
  --color-porcini-600: #835e3a;
  --color-porcini-700: #6b4a29;
  --color-porcini-800: #573a1c;
  --color-porcini-900: #462d13;
  --color-porcini-950: #2d1b08;
  --color-jewel-weed: #50a496;
  --color-jewel-weed-50: #e1fff9;
  --color-jewel-weed-100: #ccfbf2;
  --color-jewel-weed-200: #b4ece1;
  --color-jewel-weed-300: #97d9cd;
  --color-jewel-weed-400: #71bdaf;
  --color-jewel-weed-500: #50a496;
  --color-jewel-weed-600: #308679;
  --color-jewel-weed-700: #136c60;
  --color-jewel-weed-800: #00544a;
  --color-jewel-weed-900: #004038;
  --color-jewel-weed-950: #002822;
}