#566608

CSS

:root {
  --serrano-pepper: #566608;
  --serrano-pepper-rgb: 86 102 8;
  --serrano-pepper-oklch: oklch(0.48 0.111 120);
}

.element {
  color: var(--serrano-pepper);
  background-color: hsl(70 85% 22%);
  border-color: oklch(0.48 0.111 120);
}

Tailwind CSS v4

@theme {
  --color-serrano-pepper: #566608;
  --color-serrano-pepper-50: #effbd8;
  --color-serrano-pepper-100: #e1eec6;
  --color-serrano-pepper-200: #ccdca8;
  --color-serrano-pepper-300: #aec181;
  --color-serrano-pepper-400: #96a85a;
  --color-serrano-pepper-500: #7d9032;
  --color-serrano-pepper-600: #6a7a2c;
  --color-serrano-pepper-700: #556223;
  --color-serrano-pepper-800: #3f4716;
  --color-serrano-pepper-900: #2b310e;
  --color-serrano-pepper-950: #191d02;
}

SCSS

$serrano-pepper: #566608;
$serrano-pepper-rgb: 86, 102, 8;
$serrano-pepper-light: mix(#fff, $serrano-pepper, 20%);
$serrano-pepper-dark: mix(#000, $serrano-pepper, 20%);

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