Never Cry Wolf

CSS

:root {
  --never-cry-wolf: #6e6455;
  --never-cry-wolf-rgb: 110 100 85;
  --never-cry-wolf-oklch: oklch(0.508 0.026 78);
}

.element {
  color: var(--never-cry-wolf);
  background-color: hsl(36 13% 38%);
  border-color: oklch(0.508 0.026 78);
}

Tailwind CSS v4

@theme {
  --color-never-cry-wolf: #6e6455;
  --color-never-cry-wolf-50: #f9f4ed;
  --color-never-cry-wolf-100: #ece7de;
  --color-never-cry-wolf-200: #dad3c8;
  --color-never-cry-wolf-300: #bfb6a9;
  --color-never-cry-wolf-400: #a79d8e;
  --color-never-cry-wolf-500: #908473;
  --color-never-cry-wolf-600: #7a7062;
  --color-never-cry-wolf-700: #615a4e;
  --color-never-cry-wolf-800: #484138;
  --color-never-cry-wolf-900: #322d27;
  --color-never-cry-wolf-950: #1e1a15;
}

SCSS

$never-cry-wolf: #6e6455;
$never-cry-wolf-rgb: 110, 100, 85;
$never-cry-wolf-light: mix(#fff, $never-cry-wolf, 20%);
$never-cry-wolf-dark: mix(#000, $never-cry-wolf, 20%);

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