Winter Squash

CSS

:root {
  --winter-squash: #acb99f;
  --winter-squash-rgb: 172 185 159;
  --winter-squash-oklch: oklch(0.768 0.039 129);
}

.element {
  color: var(--winter-squash);
  background-color: hsl(90 16% 67%);
  border-color: oklch(0.768 0.039 129);
}

Tailwind CSS v4

@theme {
  --color-winter-squash: #acb99f;
  --color-winter-squash-50: #f1f8ec;
  --color-winter-squash-100: #e3ebdd;
  --color-winter-squash-200: #ced8c7;
  --color-winter-squash-300: #b0bca7;
  --color-winter-squash-400: #97a38b;
  --color-winter-squash-500: #7e8c70;
  --color-winter-squash-600: #6b765f;
  --color-winter-squash-700: #555e4c;
  --color-winter-squash-800: #3f4537;
  --color-winter-squash-900: #2b3025;
  --color-winter-squash-950: #181c14;
}

SCSS

$winter-squash: #acb99f;
$winter-squash-rgb: 172, 185, 159;
$winter-squash-light: mix(#fff, $winter-squash, 20%);
$winter-squash-dark: mix(#000, $winter-squash, 20%);

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