Into the Wild

CSS

:root {
  --into-the-wild: #999885;
  --into-the-wild-rgb: 153 152 133;
  --into-the-wild-oklch: oklch(0.675 0.027 104.6);
}

.element {
  color: var(--into-the-wild);
  background-color: hsl(57 9% 56%);
  border-color: oklch(0.675 0.027 104.6);
}

Tailwind CSS v4

@theme {
  --color-into-the-wild: #999885;
  --color-into-the-wild-50: #f6f6ed;
  --color-into-the-wild-100: #e9e9de;
  --color-into-the-wild-200: #d5d5c8;
  --color-into-the-wild-300: #b9b9a9;
  --color-into-the-wild-400: #a1a08d;
  --color-into-the-wild-500: #898773;
  --color-into-the-wild-600: #747361;
  --color-into-the-wild-700: #5c5c4e;
  --color-into-the-wild-800: #444338;
  --color-into-the-wild-900: #2f2e26;
  --color-into-the-wild-950: #1b1b15;
}

SCSS

$into-the-wild: #999885;
$into-the-wild-rgb: 153, 152, 133;
$into-the-wild-light: mix(#fff, $into-the-wild, 20%);
$into-the-wild-dark: mix(#000, $into-the-wild, 20%);

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