Start generating

Toasted Marshmallow Fluff to Billiard color palette

FFF8EAToasted Marshmallow FluffE2B66BHarvest Gold004035Botanical Night4D5396TwilightCB4067Dark Pink08AA9BBilliard
Open in generator Export PNG, PDF, ASE…

About this palette

Toasted Marshmallow Fluff to Billiard is a 6-color palette: #FFF8EA (Toasted Marshmallow Fluff), #E2B66B (Harvest Gold), #004035 (Botanical Night), #4D5396 (Twilight), #CB4067 (Dark Pink), #08AA9B (Billiard). It mixes white, yellow, turquoise, purple, red tones and feels cool overall. The strongest text pairing is #FFF8EA on #004035 with a contrast ratio of 11.13:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Toasted Marshmallow Fluffrgb(255, 248, 234)hsl(40, 100%, 96%)
Harvest Goldrgb(226, 182, 107)hsl(38, 67%, 65%)
Botanical Nightrgb(0, 64, 53)hsl(170, 100%, 13%)
Twilightrgb(77, 83, 150)hsl(235, 32%, 45%)
Dark Pinkrgb(203, 64, 103)hsl(343, 57%, 52%)
Billiardrgb(8, 170, 155)hsl(174, 91%, 35%)

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.

  • Aa11.13:1 Very good#FFF8EA on #004035
  • Aa11.13:1 Very good#004035 on #FFF8EA
  • Aa6.64:1 Good#FFF8EA on #4D5396
  • Aa6.64:1 Good#4D5396 on #FFF8EA
  • Aa6.24:1 Good#E2B66B on #004035
  • Aa6.24:1 Good#004035 on #E2B66B
  • Aa4.45:1 Poor#FFF8EA on #CB4067
  • Aa4.45:1 Poor#CB4067 on #FFF8EA

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Toasted Marshmallow Fluff to Billiard — https://swatchly.xyz/palette/fff8ea-e2b66b-004035-4d5396-cb4067-08aa9b */
:root {
  --toasted-marshmallow-fluff: #fff8ea;
  --harvest-gold: #e2b66b;
  --botanical-night: #004035;
  --twilight: #4d5396;
  --dark-pink: #cb4067;
  --billiard: #08aa9b;
}

Tailwind CSS v4

/* Toasted Marshmallow Fluff to Billiard — https://swatchly.xyz/palette/fff8ea-e2b66b-004035-4d5396-cb4067-08aa9b */
@theme {
  --color-toasted-marshmallow-fluff: #fff8ea;
  --color-toasted-marshmallow-fluff-50: #fff8ea;
  --color-toasted-marshmallow-fluff-100: #f2eee5;
  --color-toasted-marshmallow-fluff-200: #ded9cf;
  --color-toasted-marshmallow-fluff-300: #c8c2b7;
  --color-toasted-marshmallow-fluff-400: #a8a295;
  --color-toasted-marshmallow-fluff-500: #8c8679;
  --color-toasted-marshmallow-fluff-600: #716b5f;
  --color-toasted-marshmallow-fluff-700: #5a554a;
  --color-toasted-marshmallow-fluff-800: #464238;
  --color-toasted-marshmallow-fluff-900: #36322a;
  --color-toasted-marshmallow-fluff-950: #221f19;
  --color-harvest-gold: #e2b66b;
  --color-harvest-gold-50: #fff2dc;
  --color-harvest-gold-100: #ffe5bc;
  --color-harvest-gold-200: #f1cf98;
  --color-harvest-gold-300: #e2b66b;
  --color-harvest-gold-400: #c19750;
  --color-harvest-gold-500: #a67c2f;
  --color-harvest-gold-600: #8a620e;
  --color-harvest-gold-700: #6f4d00;
  --color-harvest-gold-800: #583c00;
  --color-harvest-gold-900: #452e00;
  --color-harvest-gold-950: #2c1c00;
  --color-botanical-night: #004035;
  --color-botanical-night-50: #defdf4;
  --color-botanical-night-100: #d2f4ea;
  --color-botanical-night-200: #b9e2d7;
  --color-botanical-night-300: #9dcdc0;
  --color-botanical-night-400: #7aafa1;
  --color-botanical-night-500: #5d9486;
  --color-botanical-night-600: #44796d;
  --color-botanical-night-700: #306257;
  --color-botanical-night-800: #214e44;
  --color-botanical-night-900: #004035;
  --color-botanical-night-950: #0a2721;
  --color-twilight: #4d5396;
  --color-twilight-50: #f2f4ff;
  --color-twilight-100: #e6eaff;
  --color-twilight-200: #cfd6ff;
  --color-twilight-300: #b4befe;
  --color-twilight-400: #959ee4;
  --color-twilight-500: #7b83ca;
  --color-twilight-600: #6269ae;
  --color-twilight-700: #4d5396;
  --color-twilight-800: #3b4078;
  --color-twilight-900: #2d3060;
  --color-twilight-950: #1b1d40;
  --color-dark-pink: #cb4067;
  --color-dark-pink-50: #ffeef0;
  --color-dark-pink-100: #ffdde2;
  --color-dark-pink-200: #ffbcc8;
  --color-dark-pink-300: #ff93a9;
  --color-dark-pink-400: #ec6184;
  --color-dark-pink-500: #cb4067;
  --color-dark-pink-600: #ac2650;
  --color-dark-pink-700: #8e113e;
  --color-dark-pink-800: #74022f;
  --color-dark-pink-900: #5d0024;
  --color-dark-pink-950: #3e0015;
  --color-billiard: #08aa9b;
  --color-billiard-50: #e1fffa;
  --color-billiard-100: #bffff5;
  --color-billiard-200: #9ff1e4;
  --color-billiard-300: #7edfd1;
  --color-billiard-400: #4cc3b4;
  --color-billiard-500: #08aa9b;
  --color-billiard-600: #00897d;
  --color-billiard-700: #006d63;
  --color-billiard-800: #00544c;
  --color-billiard-900: #00403a;
  --color-billiard-950: #002823;
}

Similar palettes