Dark Fern

CSS

:root {
  --dark-fern: #0a480d;
  --dark-fern-rgb: 10 72 13;
  --dark-fern-oklch: oklch(0.351 0.107 143.4);
}

.element {
  color: var(--dark-fern);
  background-color: hsl(123 76% 16%);
  border-color: oklch(0.351 0.107 143.4);
}

Tailwind CSS v4

@theme {
  --color-dark-fern: #0a480d;
  --color-dark-fern-50: #e3fee3;
  --color-dark-fern-100: #d2f2d3;
  --color-dark-fern-200: #b8e1b9;
  --color-dark-fern-300: #95c696;
  --color-dark-fern-400: #77af75;
  --color-dark-fern-500: #589856;
  --color-dark-fern-600: #4b8149;
  --color-dark-fern-700: #3c673a;
  --color-dark-fern-800: #2c4c28;
  --color-dark-fern-900: #1e341b;
  --color-dark-fern-950: #0d200b;
}

SCSS

$dark-fern: #0a480d;
$dark-fern-rgb: 10, 72, 13;
$dark-fern-light: mix(#fff, $dark-fern, 20%);
$dark-fern-dark: mix(#000, $dark-fern, 20%);

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