Acorn Squash

CSS

:root {
  --acorn-squash: #eda740;
  --acorn-squash-rgb: 237 167 64;
  --acorn-squash-oklch: oklch(0.778 0.141 73);
}

.element {
  color: var(--acorn-squash);
  background-color: hsl(36 83% 59%);
  border-color: oklch(0.778 0.141 73);
}

Tailwind CSS v4

@theme {
  --color-acorn-squash: #eda740;
  --color-acorn-squash-50: #fff0c9;
  --color-acorn-squash-100: #ffe2b4;
  --color-acorn-squash-200: #f8cc8f;
  --color-acorn-squash-300: #e2ad60;
  --color-acorn-squash-400: #d08f2c;
  --color-acorn-squash-500: #bd7300;
  --color-acorn-squash-600: #a06200;
  --color-acorn-squash-700: #804e00;
  --color-acorn-squash-800: #603800;
  --color-acorn-squash-900: #432600;
  --color-acorn-squash-950: #2b1400;
}

SCSS

$acorn-squash: #eda740;
$acorn-squash-rgb: 237, 167, 64;
$acorn-squash-light: mix(#fff, $acorn-squash, 20%);
$acorn-squash-dark: mix(#000, $acorn-squash, 20%);

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