Vermicelles to Foundation White Color Palette

About this palette

Vermicelles to Foundation White is a 4-color pastel, light palette: #D4C282 (Vermicelles), #DFC4DE (Decadial Pink), #D1E7CB (Peppermint), #EAEFFF (Foundation White). It mixes yellow, pink, green, white tones and feels cool overall. The strongest text pairing is #D4C282 on #EAEFFF with a contrast ratio of 1.54:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vermicelles	rgb(212, 194, 130)	hsl(47, 49%, 67%)
Decadial Pink	rgb(223, 196, 222)	hsl(302, 30%, 82%)
Peppermint	rgb(209, 231, 203)	hsl(107, 37%, 85%)
Foundation White	rgb(234, 239, 255)	hsl(226, 100%, 96%)

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

/* Vermicelles to Foundation White — https://swatchly.xyz/palette/d4c282-dfc4de-d1e7cb-eaefff */
:root {
  --vermicelles: #d4c282;
  --decadial-pink: #dfc4de;
  --peppermint: #d1e7cb;
  --foundation-white: #eaefff;
}

Tailwind CSS v4

/* Vermicelles to Foundation White — https://swatchly.xyz/palette/d4c282-dfc4de-d1e7cb-eaefff */
@theme {
  --color-vermicelles: #d4c282;
  --color-vermicelles-50: #fff6d6;
  --color-vermicelles-100: #f7ecc5;
  --color-vermicelles-200: #e6d9aa;
  --color-vermicelles-300: #d4c282;
  --color-vermicelles-400: #b3a266;
  --color-vermicelles-500: #988648;
  --color-vermicelles-600: #7c6b2e;
  --color-vermicelles-700: #64551a;
  --color-vermicelles-800: #4f420b;
  --color-vermicelles-900: #3d3203;
  --color-vermicelles-950: #271f00;
  --color-decadial-pink: #dfc4de;
  --color-decadial-pink-50: #f9e9f8;
  --color-decadial-pink-100: #efdcee;
  --color-decadial-pink-200: #dfc4de;
  --color-decadial-pink-300: #c8b0c7;
  --color-decadial-pink-400: #ab92aa;
  --color-decadial-pink-500: #917890;
  --color-decadial-pink-600: #776077;
  --color-decadial-pink-700: #614c60;
  --color-decadial-pink-800: #4e3b4d;
  --color-decadial-pink-900: #3c2d3c;
  --color-decadial-pink-950: #261b26;
  --color-peppermint: #d1e7cb;
  --color-peppermint-50: #f3fef0;
  --color-peppermint-100: #eaf6e6;
  --color-peppermint-200: #d1e7cb;
  --color-peppermint-300: #bccdb7;
  --color-peppermint-400: #9aad94;
  --color-peppermint-500: #7d9177;
  --color-peppermint-600: #61755c;
  --color-peppermint-700: #4b5c46;
  --color-peppermint-800: #384734;
  --color-peppermint-900: #2a3727;
  --color-peppermint-950: #192217;
  --color-foundation-white: #eaefff;
  --color-foundation-white-50: #f6f8ff;
  --color-foundation-white-100: #eaefff;
  --color-foundation-white-200: #d7dbe6;
  --color-foundation-white-300: #bfc3d0;
  --color-foundation-white-400: #9fa3b1;
  --color-foundation-white-500: #838795;
  --color-foundation-white-600: #686c7a;
  --color-foundation-white-700: #515561;
  --color-foundation-white-800: #3f424d;
  --color-foundation-white-900: #30323b;
  --color-foundation-white-950: #1d1f25;
}