Pale Oyster

CSS

:root {
  --pale-oyster: #9c8d72;
  --pale-oyster-rgb: 156 141 114;
  --pale-oyster-oklch: oklch(0.649 0.042 82.2);
}

.element {
  color: var(--pale-oyster);
  background-color: hsl(39 18% 53%);
  border-color: oklch(0.649 0.042 82.2);
}

Tailwind CSS v4

@theme {
  --color-pale-oyster: #9c8d72;
  --color-pale-oyster-50: #fbf4e8;
  --color-pale-oyster-100: #efe7d8;
  --color-pale-oyster-200: #ddd3c0;
  --color-pale-oyster-300: #c2b69f;
  --color-pale-oyster-400: #ab9d83;
  --color-pale-oyster-500: #948466;
  --color-pale-oyster-600: #7d7057;
  --color-pale-oyster-700: #645945;
  --color-pale-oyster-800: #4a4132;
  --color-pale-oyster-900: #332d22;
  --color-pale-oyster-950: #1f1a11;
}

SCSS

$pale-oyster: #9c8d72;
$pale-oyster-rgb: 156, 141, 114;
$pale-oyster-light: mix(#fff, $pale-oyster, 20%);
$pale-oyster-dark: mix(#000, $pale-oyster, 20%);

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