Almost Mauve

CSS

:root {
  --almost-mauve: #e5d9d6;
  --almost-mauve-rgb: 229 217 214;
  --almost-mauve-oklch: oklch(0.894 0.014 34.3);
}

.element {
  color: var(--almost-mauve);
  background-color: hsl(12 22% 87%);
  border-color: oklch(0.894 0.014 34.3);
}

Tailwind CSS v4

@theme {
  --color-almost-mauve: #e5d9d6;
  --color-almost-mauve-50: #f9f4f2;
  --color-almost-mauve-100: #ece6e5;
  --color-almost-mauve-200: #dad2d0;
  --color-almost-mauve-300: #beb5b2;
  --color-almost-mauve-400: #a69c99;
  --color-almost-mauve-500: #8f8380;
  --color-almost-mauve-600: #796f6c;
  --color-almost-mauve-700: #615957;
  --color-almost-mauve-800: #47413f;
  --color-almost-mauve-900: #312d2c;
  --color-almost-mauve-950: #1d1a19;
}

SCSS

$almost-mauve: #e5d9d6;
$almost-mauve-rgb: 229, 217, 214;
$almost-mauve-light: mix(#fff, $almost-mauve, 20%);
$almost-mauve-dark: mix(#000, $almost-mauve, 20%);

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