Ancestral

CSS

:root {
  --ancestral: #d0c1c3;
  --ancestral-rgb: 208 193 195;
  --ancestral-oklch: oklch(0.824 0.017 8.3);
}

.element {
  color: var(--ancestral);
  background-color: hsl(352 14% 79%);
  border-color: oklch(0.824 0.017 8.3);
}

Tailwind CSS v4

@theme {
  --color-ancestral: #d0c1c3;
  --color-ancestral-50: #faf3f4;
  --color-ancestral-100: #ede6e6;
  --color-ancestral-200: #dbd1d2;
  --color-ancestral-300: #c0b4b5;
  --color-ancestral-400: #a89a9c;
  --color-ancestral-500: #918284;
  --color-ancestral-600: #7b6e70;
  --color-ancestral-700: #625859;
  --color-ancestral-800: #484041;
  --color-ancestral-900: #322c2d;
  --color-ancestral-950: #1e191a;
}

SCSS

$ancestral: #d0c1c3;
$ancestral-rgb: 208, 193, 195;
$ancestral-light: mix(#fff, $ancestral, 20%);
$ancestral-dark: mix(#000, $ancestral, 20%);

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