Park Bench

CSS

:root {
  --park-bench: #537f6c;
  --park-bench-rgb: 83 127 108;
  --park-bench-oklch: oklch(0.559 0.057 165.5);
}

.element {
  color: var(--park-bench);
  background-color: hsl(154 21% 41%);
  border-color: oklch(0.559 0.057 165.5);
}

Tailwind CSS v4

@theme {
  --color-park-bench: #537f6c;
  --color-park-bench-50: #e6fbf2;
  --color-park-bench-100: #d7eee4;
  --color-park-bench-200: #beddcf;
  --color-park-bench-300: #9cc1b1;
  --color-park-bench-400: #7faa96;
  --color-park-bench-500: #61937d;
  --color-park-bench-600: #537c6a;
  --color-park-bench-700: #426355;
  --color-park-bench-800: #30493d;
  --color-park-bench-900: #20322a;
  --color-park-bench-950: #101e17;
}

SCSS

$park-bench: #537f6c;
$park-bench-rgb: 83, 127, 108;
$park-bench-light: mix(#fff, $park-bench, 20%);
$park-bench-dark: mix(#000, $park-bench, 20%);

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