#2C483E

CSS

:root {
  --pine-needle: #2c483e;
  --pine-needle-rgb: 44 72 62;
  --pine-needle-oklch: oklch(0.376 0.038 169.7);
}

.element {
  color: var(--pine-needle);
  background-color: hsl(159 24% 23%);
  border-color: oklch(0.376 0.038 169.7);
}

Tailwind CSS v4

@theme {
  --color-pine-needle: #2c483e;
  --color-pine-needle-50: #ebf9f4;
  --color-pine-needle-100: #dcece6;
  --color-pine-needle-200: #c5dad2;
  --color-pine-needle-300: #a5beb5;
  --color-pine-needle-400: #89a69b;
  --color-pine-needle-500: #6d8f82;
  --color-pine-needle-600: #5d796e;
  --color-pine-needle-700: #4a6158;
  --color-pine-needle-800: #364740;
  --color-pine-needle-900: #25312c;
  --color-pine-needle-950: #131d19;
}

SCSS

$pine-needle: #2c483e;
$pine-needle-rgb: 44, 72, 62;
$pine-needle-light: mix(#fff, $pine-needle, 20%);
$pine-needle-dark: mix(#000, $pine-needle, 20%);

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