Jade of Emeralds

CSS

:root {
  --jade-of-emeralds: #318f33;
  --jade-of-emeralds-rgb: 49 143 51;
  --jade-of-emeralds-oklch: oklch(0.575 0.157 143.5);
}

.element {
  color: var(--jade-of-emeralds);
  background-color: hsl(121 49% 38%);
  border-color: oklch(0.575 0.157 143.5);
}

Tailwind CSS v4

@theme {
  --color-jade-of-emeralds: #318f33;
  --color-jade-of-emeralds-50: #daffda;
  --color-jade-of-emeralds-100: #c8f7c9;
  --color-jade-of-emeralds-200: #a9e7ac;
  --color-jade-of-emeralds-300: #81cd85;
  --color-jade-of-emeralds-400: #60b65e;
  --color-jade-of-emeralds-500: #349f37;
  --color-jade-of-emeralds-600: #2f8730;
  --color-jade-of-emeralds-700: #256c26;
  --color-jade-of-emeralds-800: #1d4f17;
  --color-jade-of-emeralds-900: #13370f;
  --color-jade-of-emeralds-950: #052202;
}

SCSS

$jade-of-emeralds: #318f33;
$jade-of-emeralds-rgb: 49, 143, 51;
$jade-of-emeralds-light: mix(#fff, $jade-of-emeralds, 20%);
$jade-of-emeralds-dark: mix(#000, $jade-of-emeralds, 20%);

.element {
  color: $jade-of-emeralds;
  box-shadow: 0 0 0 2px rgba($jade-of-emeralds, 0.35);
}