Putting Bench

CSS

:root {
  --putting-bench: #f1e4c9;
  --putting-bench-rgb: 241 228 201;
  --putting-bench-oklch: oklch(0.922 0.038 85.3);
}

.element {
  color: var(--putting-bench);
  background-color: hsl(41 59% 87%);
  border-color: oklch(0.922 0.038 85.3);
}

Tailwind CSS v4

@theme {
  --color-putting-bench: #f1e4c9;
  --color-putting-bench-50: #faf5e9;
  --color-putting-bench-100: #ede7da;
  --color-putting-bench-200: #dbd4c2;
  --color-putting-bench-300: #c0b7a2;
  --color-putting-bench-400: #a99d85;
  --color-putting-bench-500: #928569;
  --color-putting-bench-600: #7b7059;
  --color-putting-bench-700: #635a47;
  --color-putting-bench-800: #494133;
  --color-putting-bench-900: #322d23;
  --color-putting-bench-950: #1e1a12;
}

SCSS

$putting-bench: #f1e4c9;
$putting-bench-rgb: 241, 228, 201;
$putting-bench-light: mix(#fff, $putting-bench, 20%);
$putting-bench-dark: mix(#000, $putting-bench, 20%);

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