Snow Plum

CSS

:root {
  --snow-plum: #f4eaf0;
  --snow-plum-rgb: 244 234 240;
  --snow-plum-oklch: oklch(0.947 0.013 340.6);
}

.element {
  color: var(--snow-plum);
  background-color: hsl(324 31% 94%);
  border-color: oklch(0.947 0.013 340.6);
}

Tailwind CSS v4

@theme {
  --color-snow-plum: #f4eaf0;
  --color-snow-plum-50: #f8f4f6;
  --color-snow-plum-100: #ebe6e9;
  --color-snow-plum-200: #d9d2d6;
  --color-snow-plum-300: #bdb5b9;
  --color-snow-plum-400: #a49ba1;
  --color-snow-plum-500: #8d8389;
  --color-snow-plum-600: #776f74;
  --color-snow-plum-700: #5f595d;
  --color-snow-plum-800: #464144;
  --color-snow-plum-900: #302d2f;
  --color-snow-plum-950: #1c1a1b;
}

SCSS

$snow-plum: #f4eaf0;
$snow-plum-rgb: 244, 234, 240;
$snow-plum-light: mix(#fff, $snow-plum, 20%);
$snow-plum-dark: mix(#000, $snow-plum, 20%);

.element {
  color: $snow-plum;
  box-shadow: 0 0 0 2px rgba($snow-plum, 0.35);
}