City Bench

CSS

:root {
  --city-bench: #675c49;
  --city-bench-rgb: 103 92 73;
  --city-bench-oklch: oklch(0.48 0.032 81.2);
}

.element {
  color: var(--city-bench);
  background-color: hsl(38 17% 35%);
  border-color: oklch(0.48 0.032 81.2);
}

Tailwind CSS v4

@theme {
  --color-city-bench: #675c49;
  --color-city-bench-50: #faf5eb;
  --color-city-bench-100: #ede7dc;
  --color-city-bench-200: #dbd3c5;
  --color-city-bench-300: #bfb6a5;
  --color-city-bench-400: #a89d89;
  --color-city-bench-500: #91846e;
  --color-city-bench-600: #7b705e;
  --color-city-bench-700: #625a4b;
  --color-city-bench-800: #484136;
  --color-city-bench-900: #322d25;
  --color-city-bench-950: #1e1a13;
}

SCSS

$city-bench: #675c49;
$city-bench-rgb: 103, 92, 73;
$city-bench-light: mix(#fff, $city-bench, 20%);
$city-bench-dark: mix(#000, $city-bench, 20%);

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