#5B5E00

CSS

:root {
  --serrano-pepper: #5b5e00;
  --serrano-pepper-rgb: 91 94 0;
  --serrano-pepper-oklch: oklch(0.464 0.103 111.9);
}

.element {
  color: var(--serrano-pepper);
  background-color: hsl(62 100% 18%);
  border-color: oklch(0.464 0.103 111.9);
}

Tailwind CSS v4

@theme {
  --color-serrano-pepper: #5b5e00;
  --color-serrano-pepper-50: #f4f9d8;
  --color-serrano-pepper-100: #e7ecc6;
  --color-serrano-pepper-200: #d3daa8;
  --color-serrano-pepper-300: #b6be80;
  --color-serrano-pepper-400: #a0a55b;
  --color-serrano-pepper-500: #888d32;
  --color-serrano-pepper-600: #73772c;
  --color-serrano-pepper-700: #5c5f23;
  --color-serrano-pepper-800: #454516;
  --color-serrano-pepper-900: #2f300e;
  --color-serrano-pepper-950: #1c1c02;
}

SCSS

$serrano-pepper: #5b5e00;
$serrano-pepper-rgb: 91, 94, 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);
}