Siren of Nature

CSS

:root {
  --siren-of-nature: #68a43c;
  --siren-of-nature-rgb: 104 164 60;
  --siren-of-nature-oklch: oklch(0.655 0.15 134.2);
}

.element {
  color: var(--siren-of-nature);
  background-color: hsl(95 46% 44%);
  border-color: oklch(0.655 0.15 134.2);
}

Tailwind CSS v4

@theme {
  --color-siren-of-nature: #68a43c;
  --color-siren-of-nature-50: #e2ffd5;
  --color-siren-of-nature-100: #d2f4c2;
  --color-siren-of-nature-200: #b7e4a3;
  --color-siren-of-nature-300: #94c97b;
  --color-siren-of-nature-400: #78b150;
  --color-siren-of-nature-500: #599a1f;
  --color-siren-of-nature-600: #4c831d;
  --color-siren-of-nature-700: #3c6918;
  --color-siren-of-nature-800: #2d4d0b;
  --color-siren-of-nature-900: #1f3507;
  --color-siren-of-nature-950: #0e2000;
}

SCSS

$siren-of-nature: #68a43c;
$siren-of-nature-rgb: 104, 164, 60;
$siren-of-nature-light: mix(#fff, $siren-of-nature, 20%);
$siren-of-nature-dark: mix(#000, $siren-of-nature, 20%);

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