Light Porcelain

CSS

:root {
  --light-porcelain: #e7dad7;
  --light-porcelain-rgb: 231 218 215;
  --light-porcelain-oklch: oklch(0.898 0.015 33.1);
}

.element {
  color: var(--light-porcelain);
  background-color: hsl(11 25% 87%);
  border-color: oklch(0.898 0.015 33.1);
}

Tailwind CSS v4

@theme {
  --color-light-porcelain: #e7dad7;
  --color-light-porcelain-50: #f9f4f2;
  --color-light-porcelain-100: #ede6e4;
  --color-light-porcelain-200: #dad2d0;
  --color-light-porcelain-300: #bfb5b2;
  --color-light-porcelain-400: #a79b99;
  --color-light-porcelain-500: #908380;
  --color-light-porcelain-600: #7a6f6c;
  --color-light-porcelain-700: #615956;
  --color-light-porcelain-800: #47413f;
  --color-light-porcelain-900: #312c2b;
  --color-light-porcelain-950: #1d1a19;
}

SCSS

$light-porcelain: #e7dad7;
$light-porcelain-rgb: 231, 218, 215;
$light-porcelain-light: mix(#fff, $light-porcelain, 20%);
$light-porcelain-dark: mix(#000, $light-porcelain, 20%);

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