Pale Mauve

CSS

:root {
  --pale-mauve: #c6a4a4;
  --pale-mauve-rgb: 198 164 164;
  --pale-mauve-oklch: oklch(0.749 0.04 18.1);
}

.element {
  color: var(--pale-mauve);
  background-color: hsl(0 23% 71%);
  border-color: oklch(0.749 0.04 18.1);
}

Tailwind CSS v4

@theme {
  --color-pale-mauve: #c6a4a4;
  --color-pale-mauve-50: #fff1f0;
  --color-pale-mauve-100: #f5e3e2;
  --color-pale-mauve-200: #e5cecd;
  --color-pale-mauve-300: #cbb0af;
  --color-pale-mauve-400: #b59595;
  --color-pale-mauve-500: #9f7c7c;
  --color-pale-mauve-600: #876969;
  --color-pale-mauve-700: #6c5454;
  --color-pale-mauve-800: #4f3d3e;
  --color-pale-mauve-900: #372a2a;
  --color-pale-mauve-950: #221718;
}

SCSS

$pale-mauve: #c6a4a4;
$pale-mauve-rgb: 198, 164, 164;
$pale-mauve-light: mix(#fff, $pale-mauve, 20%);
$pale-mauve-dark: mix(#000, $pale-mauve, 20%);

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