Start generating

Tutu to Avocado Stone color palette

FDE3E3TutuDEBEB2Muddy RoseBF968DMuddy MireA06A74Cinnapink766452Treasure Chest50391EAvocado Stone
Open in generator Export PNG, PDF, ASE…

About this palette

Tutu to Avocado Stone is a 6-color muted, warm, vintage, gradient palette: #FDE3E3 (Tutu), #DEBEB2 (Muddy Rose), #BF968D (Muddy Mire), #A06A74 (Cinnapink), #766452 (Treasure Chest), #50391E (Avocado Stone). It mixes white, orange, red, brown tones and feels warm overall. The strongest text pairing is #FDE3E3 on #50391E with a contrast ratio of 8.88:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Tuturgb(253, 227, 227)hsl(0, 87%, 94%)
Muddy Rosergb(222, 190, 178)hsl(16, 40%, 78%)
Muddy Mirergb(191, 150, 141)hsl(11, 28%, 65%)
Cinnapinkrgb(160, 106, 116)hsl(349, 22%, 52%)
Treasure Chestrgb(118, 100, 82)hsl(30, 18%, 39%)
Avocado Stonergb(80, 57, 30)hsl(32, 45%, 22%)

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.

  • Aa8.88:1 Very good#FDE3E3 on #50391E
  • Aa8.88:1 Very good#50391E on #FDE3E3
  • Aa6.23:1 Good#DEBEB2 on #50391E
  • Aa6.23:1 Good#50391E on #DEBEB2
  • Aa4.65:1 Good#FDE3E3 on #766452
  • Aa4.65:1 Good#766452 on #FDE3E3
  • Aa4.09:1 Poor#BF968D on #50391E
  • Aa4.09:1 Poor#50391E on #BF968D

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Tutu to Avocado Stone — https://swatchly.xyz/palette/fde3e3-debeb2-bf968d-a06a74-766452-50391e */
:root {
  --tutu: #fde3e3;
  --muddy-rose: #debeb2;
  --muddy-mire: #bf968d;
  --cinnapink: #a06a74;
  --treasure-chest: #766452;
  --avocado-stone: #50391e;
}

Tailwind CSS v4

/* Tutu to Avocado Stone — https://swatchly.xyz/palette/fde3e3-debeb2-bf968d-a06a74-766452-50391e */
@theme {
  --color-tutu: #fde3e3;
  --color-tutu-50: #fff0f0;
  --color-tutu-100: #fde3e3;
  --color-tutu-200: #e5d1d1;
  --color-tutu-300: #d0baba;
  --color-tutu-400: #b29b9b;
  --color-tutu-500: #967f7f;
  --color-tutu-600: #7b6566;
  --color-tutu-700: #635050;
  --color-tutu-800: #4f3d3e;
  --color-tutu-900: #3d2f2f;
  --color-tutu-950: #271c1c;
  --color-muddy-rose: #debeb2;
  --color-muddy-rose-50: #fff5f2;
  --color-muddy-rose-100: #feeae2;
  --color-muddy-rose-200: #eed6cd;
  --color-muddy-rose-300: #debeb2;
  --color-muddy-rose-400: #bc9e93;
  --color-muddy-rose-500: #9f8277;
  --color-muddy-rose-600: #83675c;
  --color-muddy-rose-700: #695046;
  --color-muddy-rose-800: #533d35;
  --color-muddy-rose-900: #402e27;
  --color-muddy-rose-950: #291c17;
  --color-muddy-mire: #bf968d;
  --color-muddy-mire-50: #fff2ef;
  --color-muddy-mire-100: #ffe4de;
  --color-muddy-mire-200: #efcfc8;
  --color-muddy-mire-300: #dbb7af;
  --color-muddy-mire-400: #bf968d;
  --color-muddy-mire-500: #a27b72;
  --color-muddy-mire-600: #866159;
  --color-muddy-mire-700: #6d4c44;
  --color-muddy-mire-800: #573a34;
  --color-muddy-mire-900: #442c26;
  --color-muddy-mire-950: #2c1a16;
  --color-cinnapink: #a06a74;
  --color-cinnapink-50: #ffeef1;
  --color-cinnapink-100: #ffdde3;
  --color-cinnapink-200: #f2c4cb;
  --color-cinnapink-300: #dda9b2;
  --color-cinnapink-400: #be8791;
  --color-cinnapink-500: #a06a74;
  --color-cinnapink-600: #85535c;
  --color-cinnapink-700: #6c4048;
  --color-cinnapink-800: #573038;
  --color-cinnapink-900: #45242b;
  --color-cinnapink-950: #2d161a;
  --color-treasure-chest: #766452;
  --color-treasure-chest-50: #fff3e8;
  --color-treasure-chest-100: #f5e8db;
  --color-treasure-chest-200: #e2d3c4;
  --color-treasure-chest-300: #cdbbaa;
  --color-treasure-chest-400: #ae9b88;
  --color-treasure-chest-500: #927f6c;
  --color-treasure-chest-600: #766452;
  --color-treasure-chest-700: #5e4f3f;
  --color-treasure-chest-800: #4b3d2f;
  --color-treasure-chest-900: #3a2f23;
  --color-treasure-chest-950: #251c14;
  --color-avocado-stone: #50391e;
  --color-avocado-stone-50: #fff3e6;
  --color-avocado-stone-100: #fae8d5;
  --color-avocado-stone-200: #e9d4bd;
  --color-avocado-stone-300: #d4bca2;
  --color-avocado-stone-400: #b59b7e;
  --color-avocado-stone-500: #997f62;
  --color-avocado-stone-600: #7c6448;
  --color-avocado-stone-700: #634d34;
  --color-avocado-stone-800: #50391e;
  --color-avocado-stone-900: #3c2c1a;
  --color-avocado-stone-950: #251a0e;
}

Similar palettes