Pine Needle

CSS

:root {
  --pine-needle: #334d41;
  --pine-needle-rgb: 51 77 65;
  --pine-needle-oklch: oklch(0.395 0.038 164.2);
}

.element {
  color: var(--pine-needle);
  background-color: hsl(152 20% 25%);
  border-color: oklch(0.395 0.038 164.2);
}

Tailwind CSS v4

@theme {
  --color-pine-needle: #334d41;
  --color-pine-needle-50: #ecf9f3;
  --color-pine-needle-100: #ddece5;
  --color-pine-needle-200: #c6dad1;
  --color-pine-needle-300: #a6beb3;
  --color-pine-needle-400: #8ba699;
  --color-pine-needle-500: #6f8e80;
  --color-pine-needle-600: #5f796c;
  --color-pine-needle-700: #4b6056;
  --color-pine-needle-800: #37473e;
  --color-pine-needle-900: #25312b;
  --color-pine-needle-950: #141d18;
}

SCSS

$pine-needle: #334d41;
$pine-needle-rgb: 51, 77, 65;
$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);
}