#6D6900

CSS

:root {
  --serrano-pepper: #6d6900;
  --serrano-pepper-rgb: 109 105 0;
  --serrano-pepper-oklch: oklch(0.508 0.109 107.1);
}

.element {
  color: var(--serrano-pepper);
  background-color: hsl(58 100% 21%);
  border-color: oklch(0.508 0.109 107.1);
}

Tailwind CSS v4

@theme {
  --color-serrano-pepper: #6d6900;
  --color-serrano-pepper-50: #f7f8d5;
  --color-serrano-pepper-100: #eaecc2;
  --color-serrano-pepper-200: #d7d9a3;
  --color-serrano-pepper-300: #bbbc7a;
  --color-serrano-pepper-400: #a6a352;
  --color-serrano-pepper-500: #8f8b24;
  --color-serrano-pepper-600: #797521;
  --color-serrano-pepper-700: #615e1a;
  --color-serrano-pepper-800: #484410;
  --color-serrano-pepper-900: #322f0a;
  --color-serrano-pepper-950: #1e1b00;
}

SCSS

$serrano-pepper: #6d6900;
$serrano-pepper-rgb: 109, 105, 0;
$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);
}