Hot Dog Relish

CSS

:root {
  --hot-dog-relish: #717c3e;
  --hot-dog-relish-rgb: 113 124 62;
  --hot-dog-relish-oklch: oklch(0.563 0.087 117.6);
}

.element {
  color: var(--hot-dog-relish);
  background-color: hsl(71 33% 36%);
  border-color: oklch(0.563 0.087 117.6);
}

Tailwind CSS v4

@theme {
  --color-hot-dog-relish: #717c3e;
  --color-hot-dog-relish-50: #f2f9de;
  --color-hot-dog-relish-100: #e4edcd;
  --color-hot-dog-relish-200: #cfdab1;
  --color-hot-dog-relish-300: #b2be8c;
  --color-hot-dog-relish-400: #9aa66a;
  --color-hot-dog-relish-500: #818e48;
  --color-hot-dog-relish-600: #6e783e;
  --color-hot-dog-relish-700: #586031;
  --color-hot-dog-relish-800: #414621;
  --color-hot-dog-relish-900: #2d3016;
  --color-hot-dog-relish-950: #1a1d07;
}

SCSS

$hot-dog-relish: #717c3e;
$hot-dog-relish-rgb: 113, 124, 62;
$hot-dog-relish-light: mix(#fff, $hot-dog-relish, 20%);
$hot-dog-relish-dark: mix(#000, $hot-dog-relish, 20%);

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