Mossy Bench

CSS

:root {
  --mossy-bench: #83a28f;
  --mossy-bench-rgb: 131 162 143;
  --mossy-bench-oklch: oklch(0.683 0.044 158.1);
}

.element {
  color: var(--mossy-bench);
  background-color: hsl(143 14% 57%);
  border-color: oklch(0.683 0.044 158.1);
}

Tailwind CSS v4

@theme {
  --color-mossy-bench: #83a28f;
  --color-mossy-bench-50: #ebf9f1;
  --color-mossy-bench-100: #dcede3;
  --color-mossy-bench-200: #c5dace;
  --color-mossy-bench-300: #a5bfb0;
  --color-mossy-bench-400: #89a795;
  --color-mossy-bench-500: #6e8f7b;
  --color-mossy-bench-600: #5d7968;
  --color-mossy-bench-700: #4a6153;
  --color-mossy-bench-800: #36473c;
  --color-mossy-bench-900: #253129;
  --color-mossy-bench-950: #141d17;
}

SCSS

$mossy-bench: #83a28f;
$mossy-bench-rgb: 131, 162, 143;
$mossy-bench-light: mix(#fff, $mossy-bench, 20%);
$mossy-bench-dark: mix(#000, $mossy-bench, 20%);

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