Dark Jungle

CSS

:root {
  --dark-jungle: #0b3021;
  --dark-jungle-rgb: 11 48 33;
  --dark-jungle-oklch: oklch(0.278 0.05 162.8);
}

.element {
  color: var(--dark-jungle);
  background-color: hsl(156 63% 12%);
  border-color: oklch(0.278 0.05 162.8);
}

Tailwind CSS v4

@theme {
  --color-dark-jungle: #0b3021;
  --color-dark-jungle-50: #e9faf1;
  --color-dark-jungle-100: #d9eee4;
  --color-dark-jungle-200: #c1dbcf;
  --color-dark-jungle-300: #a0c0b1;
  --color-dark-jungle-400: #84a896;
  --color-dark-jungle-500: #67917c;
  --color-dark-jungle-600: #587b69;
  --color-dark-jungle-700: #466254;
  --color-dark-jungle-800: #33483d;
  --color-dark-jungle-900: #23322a;
  --color-dark-jungle-950: #121e17;
}

SCSS

$dark-jungle: #0b3021;
$dark-jungle-rgb: 11, 48, 33;
$dark-jungle-light: mix(#fff, $dark-jungle, 20%);
$dark-jungle-dark: mix(#000, $dark-jungle, 20%);

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