Deep Into the Wood

CSS

:root {
  --deep-into-the-wood: #306030;
  --deep-into-the-wood-rgb: 48 96 48;
  --deep-into-the-wood-oklch: oklch(0.442 0.092 143.8);
}

.element {
  color: var(--deep-into-the-wood);
  background-color: hsl(120 33% 28%);
  border-color: oklch(0.442 0.092 143.8);
}

Tailwind CSS v4

@theme {
  --color-deep-into-the-wood: #306030;
  --color-deep-into-the-wood-50: #e5fde6;
  --color-deep-into-the-wood-100: #d5f1d6;
  --color-deep-into-the-wood-200: #bcdfbd;
  --color-deep-into-the-wood-300: #9ac59b;
  --color-deep-into-the-wood-400: #7dad7b;
  --color-deep-into-the-wood-500: #5f965e;
  --color-deep-into-the-wood-600: #517f50;
  --color-deep-into-the-wood-700: #406640;
  --color-deep-into-the-wood-800: #2f4a2c;
  --color-deep-into-the-wood-900: #20341e;
  --color-deep-into-the-wood-950: #0f1f0e;
}

SCSS

$deep-into-the-wood: #306030;
$deep-into-the-wood-rgb: 48, 96, 48;
$deep-into-the-wood-light: mix(#fff, $deep-into-the-wood, 20%);
$deep-into-the-wood-dark: mix(#000, $deep-into-the-wood, 20%);

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