Polished Marble

CSS

:root {
  --polished-marble: #d0bc9d;
  --polished-marble-rgb: 208 188 157;
  --polished-marble-oklch: oklch(0.804 0.048 78.8);
}

.element {
  color: var(--polished-marble);
  background-color: hsl(36 35% 72%);
  border-color: oklch(0.804 0.048 78.8);
}

Tailwind CSS v4

@theme {
  --color-polished-marble: #d0bc9d;
  --color-polished-marble-50: #fcf4e6;
  --color-polished-marble-100: #f0e7d6;
  --color-polished-marble-200: #dfd3be;
  --color-polished-marble-300: #c4b59c;
  --color-polished-marble-400: #ae9c7f;
  --color-polished-marble-500: #988362;
  --color-polished-marble-600: #806f54;
  --color-polished-marble-700: #675943;
  --color-polished-marble-800: #4c4030;
  --color-polished-marble-900: #352c20;
  --color-polished-marble-950: #201910;
}

SCSS

$polished-marble: #d0bc9d;
$polished-marble-rgb: 208, 188, 157;
$polished-marble-light: mix(#fff, $polished-marble, 20%);
$polished-marble-dark: mix(#000, $polished-marble, 20%);

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