Down Dog

CSS

:root {
  --down-dog: #baafb9;
  --down-dog-rgb: 186 175 185;
  --down-dog-oklch: oklch(0.766 0.019 328.6);
}

.element {
  color: var(--down-dog);
  background-color: hsl(305 7% 71%);
  border-color: oklch(0.766 0.019 328.6);
}

Tailwind CSS v4

@theme {
  --color-down-dog: #baafb9;
  --color-down-dog-50: #f8f3f8;
  --color-down-dog-100: #ece6eb;
  --color-down-dog-200: #d9d1d8;
  --color-down-dog-300: #bdb4bc;
  --color-down-dog-400: #a59ba4;
  --color-down-dog-500: #8d828c;
  --color-down-dog-600: #786e77;
  --color-down-dog-700: #60585f;
  --color-down-dog-800: #464046;
  --color-down-dog-900: #302c30;
  --color-down-dog-950: #1d191d;
}

SCSS

$down-dog: #baafb9;
$down-dog-rgb: 186, 175, 185;
$down-dog-light: mix(#fff, $down-dog, 20%);
$down-dog-dark: mix(#000, $down-dog, 20%);

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