Vanilla Cream to Madras Color Palette

About this palette

Vanilla Cream to Madras is a 4-color vintage palette: #F6E3AE (Vanilla Cream), #929CCF (Azureno), #617AAC (Endless River), #4A3F24 (Madras). It mixes yellow, purple, blue, brown tones and feels balanced overall. The strongest text pairing is #F6E3AE on #4A3F24 with a contrast ratio of 8.15:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vanilla Cream	rgb(246, 227, 174)	hsl(44, 80%, 82%)
Azureno	rgb(146, 156, 207)	hsl(230, 39%, 69%)
Endless River	rgb(97, 122, 172)	hsl(220, 31%, 53%)
Madras	rgb(74, 63, 36)	hsl(43, 35%, 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.15:1 Very good#F6E3AE on #4A3F24
Aa8.15:1 Very good#4A3F24 on #F6E3AE
Aa3.89:1 Poor#929CCF on #4A3F24
Aa3.89:1 Poor#4A3F24 on #929CCF
Aa3.38:1 Poor#F6E3AE on #617AAC
Aa3.38:1 Poor#617AAC on #F6E3AE

Color blindness preview

CSS variables

/* Vanilla Cream to Madras — https://swatchly.xyz/palette/f6e3ae-929ccf-617aac-4a3f24 */
:root {
  --vanilla-cream: #f6e3ae;
  --azureno: #929ccf;
  --endless-river: #617aac;
  --madras: #4a3f24;
}

Tailwind CSS v4

/* Vanilla Cream to Madras — https://swatchly.xyz/palette/f6e3ae-929ccf-617aac-4a3f24 */
@theme {
  --color-vanilla-cream: #f6e3ae;
  --color-vanilla-cream-50: #faefd0;
  --color-vanilla-cream-100: #f6e3ae;
  --color-vanilla-cream-200: #dfd1a9;
  --color-vanilla-cream-300: #cbbb8f;
  --color-vanilla-cream-400: #ae9d6c;
  --color-vanilla-cream-500: #948351;
  --color-vanilla-cream-600: #7a6939;
  --color-vanilla-cream-700: #635427;
  --color-vanilla-cream-800: #4e4119;
  --color-vanilla-cream-900: #3d320f;
  --color-vanilla-cream-950: #271e06;
  --color-azureno: #929ccf;
  --color-azureno-50: #f1f4ff;
  --color-azureno-100: #e4e9ff;
  --color-azureno-200: #cbd4fc;
  --color-azureno-300: #b3bcea;
  --color-azureno-400: #929ccf;
  --color-azureno-500: #7881b2;
  --color-azureno-600: #5e6796;
  --color-azureno-700: #4a517b;
  --color-azureno-800: #383f63;
  --color-azureno-900: #2b304f;
  --color-azureno-950: #1a1d34;
  --color-endless-river: #617aac;
  --color-endless-river-50: #edf3ff;
  --color-endless-river-100: #dbe7ff;
  --color-endless-river-200: #bcd2fc;
  --color-endless-river-300: #a0b9e9;
  --color-endless-river-400: #7e97ca;
  --color-endless-river-500: #617aac;
  --color-endless-river-600: #4b6290;
  --color-endless-river-700: #394d77;
  --color-endless-river-800: #2b3c60;
  --color-endless-river-900: #202f4d;
  --color-endless-river-950: #121d33;
  --color-madras: #4a3f24;
  --color-madras-50: #fcf5e3;
  --color-madras-100: #f3ebd7;
  --color-madras-200: #e0d7c0;
  --color-madras-300: #cbc0a5;
  --color-madras-400: #aca083;
  --color-madras-500: #908467;
  --color-madras-600: #75694d;
  --color-madras-700: #5d5239;
  --color-madras-800: #4a3f24;
  --color-madras-900: #38301e;
  --color-madras-950: #231d10;
}