Porcelain Figurines

CSS

:root {
  --porcelain-figurines: #a9998c;
  --porcelain-figurines-rgb: 169 153 140;
  --porcelain-figurines-oklch: oklch(0.693 0.027 61.5);
}

.element {
  color: var(--porcelain-figurines);
  background-color: hsl(27 14% 61%);
  border-color: oklch(0.693 0.027 61.5);
}

Tailwind CSS v4

@theme {
  --color-porcelain-figurines: #a9998c;
  --color-porcelain-figurines-50: #fbf4ed;
  --color-porcelain-figurines-100: #efe6df;
  --color-porcelain-figurines-200: #ddd2c9;
  --color-porcelain-figurines-300: #c2b5aa;
  --color-porcelain-figurines-400: #aa9b8f;
  --color-porcelain-figurines-500: #948375;
  --color-porcelain-figurines-600: #7d6f63;
  --color-porcelain-figurines-700: #64584f;
  --color-porcelain-figurines-800: #4a4039;
  --color-porcelain-figurines-900: #332c27;
  --color-porcelain-figurines-950: #1f1915;
}

SCSS

$porcelain-figurines: #a9998c;
$porcelain-figurines-rgb: 169, 153, 140;
$porcelain-figurines-light: mix(#fff, $porcelain-figurines, 20%);
$porcelain-figurines-dark: mix(#000, $porcelain-figurines, 20%);

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