The Wild Apothecary

CSS

:root {
  --the-wild-apothecary: #118844;
  --the-wild-apothecary-rgb: 17 136 68;
  --the-wild-apothecary-oklch: oklch(0.551 0.142 151.3);
}

.element {
  color: var(--the-wild-apothecary);
  background-color: hsl(146 78% 30%);
  border-color: oklch(0.551 0.142 151.3);
}

Tailwind CSS v4

@theme {
  --color-the-wild-apothecary: #118844;
  --color-the-wild-apothecary-50: #d7ffe2;
  --color-the-wild-apothecary-100: #c4f6d2;
  --color-the-wild-apothecary-200: #a5e6b8;
  --color-the-wild-apothecary-300: #7bcd95;
  --color-the-wild-apothecary-400: #55b672;
  --color-the-wild-apothecary-500: #1ea053;
  --color-the-wild-apothecary-600: #1e8747;
  --color-the-wild-apothecary-700: #196c38;
  --color-the-wild-apothecary-800: #144f25;
  --color-the-wild-apothecary-900: #0d3719;
  --color-the-wild-apothecary-950: #01220a;
}

SCSS

$the-wild-apothecary: #118844;
$the-wild-apothecary-rgb: 17, 136, 68;
$the-wild-apothecary-light: mix(#fff, $the-wild-apothecary, 20%);
$the-wild-apothecary-dark: mix(#000, $the-wild-apothecary, 20%);

.element {
  color: $the-wild-apothecary;
  box-shadow: 0 0 0 2px rgba($the-wild-apothecary, 0.35);
}