Pastel Day to Pinot Noir Color Palette

About this palette

Pastel Day to Pinot Noir is a 5-color muted palette: #E0D4E8 (Pastel Day), #9A788B (Muted Berry), #B3A2BE (Pastel Purple), #302626 (Wood Bark), #634C59 (Pinot Noir). It mixes gray, pink, purple, red tones and feels warm overall. The strongest text pairing is #E0D4E8 on #302626 with a contrast ratio of 10.31:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Day	rgb(224, 212, 232)	hsl(276, 30%, 87%)
Muted Berry	rgb(154, 120, 139)	hsl(326, 14%, 54%)
Pastel Purple	rgb(179, 162, 190)	hsl(276, 18%, 69%)
Wood Bark	rgb(48, 38, 38)	hsl(0, 12%, 17%)
Pinot Noir	rgb(99, 76, 89)	hsl(326, 13%, 34%)

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.

Aa10.31:1 Very good#E0D4E8 on #302626
Aa10.31:1 Very good#302626 on #E0D4E8
Aa6.17:1 Good#B3A2BE on #302626
Aa6.17:1 Good#302626 on #B3A2BE
Aa5.45:1 Good#E0D4E8 on #634C59
Aa5.45:1 Good#634C59 on #E0D4E8
Aa3.80:1 Poor#9A788B on #302626
Aa3.80:1 Poor#302626 on #9A788B

Color blindness preview

CSS variables

/* Pastel Day to Pinot Noir — https://swatchly.xyz/palette/e0d4e8-9a788b-b3a2be-302626-634c59 */
:root {
  --pastel-day: #e0d4e8;
  --muted-berry: #9a788b;
  --pastel-purple: #b3a2be;
  --wood-bark: #302626;
  --pinot-noir: #634c59;
}

Tailwind CSS v4

/* Pastel Day to Pinot Noir — https://swatchly.xyz/palette/e0d4e8-9a788b-b3a2be-302626-634c59 */
@theme {
  --color-pastel-day: #e0d4e8;
  --color-pastel-day-50: #faf3fe;
  --color-pastel-day-100: #f1e9f6;
  --color-pastel-day-200: #e0d4e8;
  --color-pastel-day-300: #c8becf;
  --color-pastel-day-400: #a99eb0;
  --color-pastel-day-500: #8d8294;
  --color-pastel-day-600: #726879;
  --color-pastel-day-700: #5b5161;
  --color-pastel-day-800: #473f4c;
  --color-pastel-day-900: #37303b;
  --color-pastel-day-950: #221d25;
  --color-muted-berry: #9a788b;
  --color-muted-berry-50: #fff0f8;
  --color-muted-berry-100: #fae2ef;
  --color-muted-berry-200: #e9cddc;
  --color-muted-berry-300: #d4b5c6;
  --color-muted-berry-400: #b694a7;
  --color-muted-berry-500: #9a788b;
  --color-muted-berry-600: #7f5f71;
  --color-muted-berry-700: #664a5a;
  --color-muted-berry-800: #513847;
  --color-muted-berry-900: #402b37;
  --color-muted-berry-950: #291922;
  --color-pastel-purple: #b3a2be;
  --color-pastel-purple-50: #fbf5ff;
  --color-pastel-purple-100: #f5ebfc;
  --color-pastel-purple-200: #e4d8ec;
  --color-pastel-purple-300: #d0c1d9;
  --color-pastel-purple-400: #b3a2be;
  --color-pastel-purple-500: #9685a0;
  --color-pastel-purple-600: #796a83;
  --color-pastel-purple-700: #61526a;
  --color-pastel-purple-800: #4b3f53;
  --color-pastel-purple-900: #3a2f40;
  --color-pastel-purple-950: #231c28;
  --color-wood-bark: #302626;
  --color-wood-bark-50: #fbf3f3;
  --color-wood-bark-100: #f1e9e9;
  --color-wood-bark-200: #dfd5d5;
  --color-wood-bark-300: #c9bebe;
  --color-wood-bark-400: #a89c9c;
  --color-wood-bark-500: #8b7f7f;
  --color-wood-bark-600: #6e6363;
  --color-wood-bark-700: #554b4b;
  --color-wood-bark-800: #403737;
  --color-wood-bark-900: #302626;
  --color-wood-bark-950: #1b1616;
  --color-pinot-noir: #634c59;
  --color-pinot-noir-50: #fff0f8;
  --color-pinot-noir-100: #f7e5ef;
  --color-pinot-noir-200: #e5d0dc;
  --color-pinot-noir-300: #d0b9c5;
  --color-pinot-noir-400: #b298a6;
  --color-pinot-noir-500: #967d8b;
  --color-pinot-noir-600: #7a6370;
  --color-pinot-noir-700: #634c59;
  --color-pinot-noir-800: #4d3b45;
  --color-pinot-noir-900: #3c2d35;
  --color-pinot-noir-950: #261b21;
}