Boot Hill Ghost

CSS

:root {
  --boot-hill-ghost: #ddaf8e;
  --boot-hill-ghost-rgb: 221 175 142;
  --boot-hill-ghost-oklch: oklch(0.788 0.07 57.2);
}

.element {
  color: var(--boot-hill-ghost);
  background-color: hsl(25 54% 71%);
  border-color: oklch(0.788 0.07 57.2);
}

Tailwind CSS v4

@theme {
  --color-boot-hill-ghost: #ddaf8e;
  --color-boot-hill-ghost-50: #fff1e2;
  --color-boot-hill-ghost-100: #fae3d1;
  --color-boot-hill-ghost-200: #ecceb7;
  --color-boot-hill-ghost-300: #d3af94;
  --color-boot-hill-ghost-400: #bf9476;
  --color-boot-hill-ghost-500: #aa7a57;
  --color-boot-hill-ghost-600: #90684a;
  --color-boot-hill-ghost-700: #73533b;
  --color-boot-hill-ghost-800: #553c2b;
  --color-boot-hill-ghost-900: #3c291d;
  --color-boot-hill-ghost-950: #25170d;
}

SCSS

$boot-hill-ghost: #ddaf8e;
$boot-hill-ghost-rgb: 221, 175, 142;
$boot-hill-ghost-light: mix(#fff, $boot-hill-ghost, 20%);
$boot-hill-ghost-dark: mix(#000, $boot-hill-ghost, 20%);

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