Mixed Veggies

CSS

:root {
  --mixed-veggies: #719166;
  --mixed-veggies-rgb: 113 145 102;
  --mixed-veggies-oklch: oklch(0.621 0.072 137.8);
}

.element {
  color: var(--mixed-veggies);
  background-color: hsl(105 17% 48%);
  border-color: oklch(0.621 0.072 137.8);
}

Tailwind CSS v4

@theme {
  --color-mixed-veggies: #719166;
  --color-mixed-veggies-50: #ebfbe7;
  --color-mixed-veggies-100: #dceed7;
  --color-mixed-veggies-200: #c5dcbf;
  --color-mixed-veggies-300: #a4c19e;
  --color-mixed-veggies-400: #8aa97f;
  --color-mixed-veggies-500: #6f9262;
  --color-mixed-veggies-600: #5e7b54;
  --color-mixed-veggies-700: #4b6343;
  --color-mixed-veggies-800: #37482f;
  --color-mixed-veggies-900: #263220;
  --color-mixed-veggies-950: #141e0f;
}

SCSS

$mixed-veggies: #719166;
$mixed-veggies-rgb: 113, 145, 102;
$mixed-veggies-light: mix(#fff, $mixed-veggies, 20%);
$mixed-veggies-dark: mix(#000, $mixed-veggies, 20%);

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