Crisp Capsicum

CSS

:root {
  --crisp-capsicum: #5d6e3b;
  --crisp-capsicum-rgb: 93 110 59;
  --crisp-capsicum-oklch: oklch(0.511 0.077 124.2);
}

.element {
  color: var(--crisp-capsicum);
  background-color: hsl(80 30% 33%);
  border-color: oklch(0.511 0.077 124.2);
}

Tailwind CSS v4

@theme {
  --color-crisp-capsicum: #5d6e3b;
  --color-crisp-capsicum-50: #effae2;
  --color-crisp-capsicum-100: #e1edd2;
  --color-crisp-capsicum-200: #ccdbb8;
  --color-crisp-capsicum-300: #adbf94;
  --color-crisp-capsicum-400: #95a774;
  --color-crisp-capsicum-500: #7b8f55;
  --color-crisp-capsicum-600: #687948;
  --color-crisp-capsicum-700: #53613a;
  --color-crisp-capsicum-800: #3e4728;
  --color-crisp-capsicum-900: #2a311b;
  --color-crisp-capsicum-950: #181d0b;
}

SCSS

$crisp-capsicum: #5d6e3b;
$crisp-capsicum-rgb: 93, 110, 59;
$crisp-capsicum-light: mix(#fff, $crisp-capsicum, 20%);
$crisp-capsicum-dark: mix(#000, $crisp-capsicum, 20%);

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