Malibu Sun to Vive le Vent Color Palette

About this palette

Malibu Sun to Vive le Vent is a 5-color pastel, light palette: #FFF2DB (Malibu Sun), #FFD4AB (Tuscan), #E5C2C0 (Rose Haze), #D6E2C0 (Airy Fields), #A4CFE3 (Vive le Vent). It mixes white, orange, pink, green, blue tones and feels balanced overall. The strongest text pairing is #FFF2DB on #A4CFE3 with a contrast ratio of 1.50:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Malibu Sun	rgb(255, 242, 219)	hsl(38, 100%, 93%)
Tuscan	rgb(255, 212, 171)	hsl(29, 100%, 84%)
Rose Haze	rgb(229, 194, 192)	hsl(3, 42%, 83%)
Airy Fields	rgb(214, 226, 192)	hsl(81, 37%, 82%)
Vive le Vent	rgb(164, 207, 227)	hsl(199, 53%, 77%)

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.

Color blindness preview

CSS variables

/* Malibu Sun to Vive le Vent — https://swatchly.xyz/palette/fff2db-ffd4ab-e5c2c0-d6e2c0-a4cfe3 */
:root {
  --malibu-sun: #fff2db;
  --tuscan: #ffd4ab;
  --rose-haze: #e5c2c0;
  --airy-fields: #d6e2c0;
  --vive-le-vent: #a4cfe3;
}

Tailwind CSS v4

/* Malibu Sun to Vive le Vent — https://swatchly.xyz/palette/fff2db-ffd4ab-e5c2c0-d6e2c0-a4cfe3 */
@theme {
  --color-malibu-sun: #fff2db;
  --color-malibu-sun-50: #fff2db;
  --color-malibu-sun-100: #f1e9db;
  --color-malibu-sun-200: #dfd5c5;
  --color-malibu-sun-300: #c9bfac;
  --color-malibu-sun-400: #aba08b;
  --color-malibu-sun-500: #908470;
  --color-malibu-sun-600: #756a57;
  --color-malibu-sun-700: #5e5442;
  --color-malibu-sun-800: #4a4131;
  --color-malibu-sun-900: #393225;
  --color-malibu-sun-950: #241e15;
  --color-tuscan: #ffd4ab;
  --color-tuscan-50: #fff7f0;
  --color-tuscan-100: #ffecdb;
  --color-tuscan-200: #ffd4ab;
  --color-tuscan-300: #e1be9d;
  --color-tuscan-400: #c39d77;
  --color-tuscan-500: #a78059;
  --color-tuscan-600: #8a653f;
  --color-tuscan-700: #704e2c;
  --color-tuscan-800: #583b1d;
  --color-tuscan-900: #452d13;
  --color-tuscan-950: #2d1b08;
  --color-rose-haze: #e5c2c0;
  --color-rose-haze-50: #fff9f9;
  --color-rose-haze-100: #ffeeed;
  --color-rose-haze-200: #f3dad8;
  --color-rose-haze-300: #e5c2c0;
  --color-rose-haze-400: #c1a1a0;
  --color-rose-haze-500: #a48482;
  --color-rose-haze-600: #876866;
  --color-rose-haze-700: #6c504f;
  --color-rose-haze-800: #553d3c;
  --color-rose-haze-900: #412d2c;
  --color-rose-haze-950: #291b1a;
  --color-airy-fields: #d6e2c0;
  --color-airy-fields-50: #f5fce9;
  --color-airy-fields-100: #ebf3de;
  --color-airy-fields-200: #d6e2c0;
  --color-airy-fields-300: #c0caae;
  --color-airy-fields-400: #9faa8b;
  --color-airy-fields-500: #838d6e;
  --color-airy-fields-600: #687254;
  --color-airy-fields-700: #515a3f;
  --color-airy-fields-800: #3e462e;
  --color-airy-fields-900: #2f3622;
  --color-airy-fields-950: #1d2113;
  --color-vive-le-vent: #a4cfe3;
  --color-vive-le-vent-50: #f1faff;
  --color-vive-le-vent-100: #ddf4ff;
  --color-vive-le-vent-200: #c4e3f1;
  --color-vive-le-vent-300: #a4cfe3;
  --color-vive-le-vent-400: #86aec0;
  --color-vive-le-vent-500: #6891a4;
  --color-vive-le-vent-600: #4d7587;
  --color-vive-le-vent-700: #385d6d;
  --color-vive-le-vent-800: #284856;
  --color-vive-le-vent-900: #1b3743;
  --color-vive-le-vent-950: #0e222b;
}