Start generating

Walnut Milkies to Azulado color palette

FFF0CCWalnut MilkiesA4A7E6Wondrous WisteriaAE7400Falafel315533Ficus221E46Azulado
Open in generator Export PNG, PDF, ASE…

About this palette

Walnut Milkies to Azulado is a 5-color cool, vintage palette: #FFF0CC (Walnut Milkies), #A4A7E6 (Wondrous Wisteria), #AE7400 (Falafel), #315533 (Ficus), #221E46 (Azulado). It mixes white, purple, orange, green tones and feels cool overall. The strongest text pairing is #FFF0CC on #221E46 with a contrast ratio of 13.85:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Walnut Milkiesrgb(255, 240, 204)hsl(42, 100%, 90%)
Wondrous Wisteriargb(164, 167, 230)hsl(237, 57%, 77%)
Falafelrgb(174, 116, 0)hsl(40, 100%, 34%)
Ficusrgb(49, 85, 51)hsl(123, 27%, 26%)
Azuladorgb(34, 30, 70)hsl(246, 40%, 20%)

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.85:1 Super#FFF0CC on #221E46
  • Aa13.85:1 Super#221E46 on #FFF0CC
  • Aa7.50:1 Very good#FFF0CC on #315533
  • Aa7.50:1 Very good#315533 on #FFF0CC
  • Aa6.89:1 Good#A4A7E6 on #221E46
  • Aa6.89:1 Good#221E46 on #A4A7E6
  • Aa3.95:1 Poor#AE7400 on #221E46
  • Aa3.95:1 Poor#221E46 on #AE7400

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Walnut Milkies to Azulado — https://swatchly.xyz/palette/fff0cc-a4a7e6-ae7400-315533-221e46 */
:root {
  --walnut-milkies: #fff0cc;
  --wondrous-wisteria: #a4a7e6;
  --falafel: #ae7400;
  --ficus: #315533;
  --azulado: #221e46;
}

Tailwind CSS v4

/* Walnut Milkies to Azulado — https://swatchly.xyz/palette/fff0cc-a4a7e6-ae7400-315533-221e46 */
@theme {
  --color-walnut-milkies: #fff0cc;
  --color-walnut-milkies-50: #fff0cc;
  --color-walnut-milkies-100: #f1e7d1;
  --color-walnut-milkies-200: #dfd4ba;
  --color-walnut-milkies-300: #cabea0;
  --color-walnut-milkies-400: #ad9f7f;
  --color-walnut-milkies-500: #928463;
  --color-walnut-milkies-600: #786b4b;
  --color-walnut-milkies-700: #605437;
  --color-walnut-milkies-800: #4c4128;
  --color-walnut-milkies-900: #3b321c;
  --color-walnut-milkies-950: #251f0f;
  --color-wondrous-wisteria: #a4a7e6;
  --color-wondrous-wisteria-50: #f8f9ff;
  --color-wondrous-wisteria-100: #eff0ff;
  --color-wondrous-wisteria-200: #daddff;
  --color-wondrous-wisteria-300: #c3c6fb;
  --color-wondrous-wisteria-400: #a4a7e6;
  --color-wondrous-wisteria-500: #8789c6;
  --color-wondrous-wisteria-600: #6b6ca7;
  --color-wondrous-wisteria-700: #535489;
  --color-wondrous-wisteria-800: #3f406e;
  --color-wondrous-wisteria-900: #2f2f56;
  --color-wondrous-wisteria-950: #1c1c37;
  --color-falafel: #ae7400;
  --color-falafel-50: #fff2e2;
  --color-falafel-100: #ffe5c3;
  --color-falafel-200: #fbcc8c;
  --color-falafel-300: #e8b368;
  --color-falafel-400: #cb9138;
  --color-falafel-500: #ae7400;
  --color-falafel-600: #8d5d00;
  --color-falafel-700: #704900;
  --color-falafel-800: #593900;
  --color-falafel-900: #452b00;
  --color-falafel-950: #2d1a00;
  --color-ficus: #315533;
  --color-ficus-50: #e6fde6;
  --color-ficus-100: #daf3da;
  --color-ficus-200: #c3e1c3;
  --color-ficus-300: #abcdac;
  --color-ficus-400: #8bb08c;
  --color-ficus-500: #709771;
  --color-ficus-600: #587d59;
  --color-ficus-700: #446746;
  --color-ficus-800: #315533;
  --color-ficus-900: #264128;
  --color-ficus-950: #162a17;
  --color-azulado: #221e46;
  --color-azulado-50: #f4f4ff;
  --color-azulado-100: #e8e9ff;
  --color-azulado-200: #d3d3fa;
  --color-azulado-300: #bcbce8;
  --color-azulado-400: #9c9ccc;
  --color-azulado-500: #8281b2;
  --color-azulado-600: #696896;
  --color-azulado-700: #54537d;
  --color-azulado-800: #434267;
  --color-azulado-900: #353354;
  --color-azulado-950: #221e46;
}

Similar palettes