Stanford Stone

CSS

:root {
  --stanford-stone: #bcab9c;
  --stanford-stone-rgb: 188 171 156;
  --stanford-stone-oklch: oklch(0.752 0.029 63.8);
}

.element {
  color: var(--stanford-stone);
  background-color: hsl(28 19% 67%);
  border-color: oklch(0.752 0.029 63.8);
}

Tailwind CSS v4

@theme {
  --color-stanford-stone: #bcab9c;
  --color-stanford-stone-50: #fbf4ed;
  --color-stanford-stone-100: #efe6de;
  --color-stanford-stone-200: #ddd2c8;
  --color-stanford-stone-300: #c2b5a8;
  --color-stanford-stone-400: #ab9b8d;
  --color-stanford-stone-500: #948273;
  --color-stanford-stone-600: #7d6e61;
  --color-stanford-stone-700: #64584e;
  --color-stanford-stone-800: #4a4038;
  --color-stanford-stone-900: #332c27;
  --color-stanford-stone-950: #1f1915;
}

SCSS

$stanford-stone: #bcab9c;
$stanford-stone-rgb: 188, 171, 156;
$stanford-stone-light: mix(#fff, $stanford-stone, 20%);
$stanford-stone-dark: mix(#000, $stanford-stone, 20%);

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