Double Spanish White

CSS

:root {
  --double-spanish-white: #d2c3a3;
  --double-spanish-white-rgb: 210 195 163;
  --double-spanish-white-oklch: oklch(0.821 0.046 85.8);
}

.element {
  color: var(--double-spanish-white);
  background-color: hsl(41 34% 73%);
  border-color: oklch(0.821 0.046 85.8);
}

Tailwind CSS v4

@theme {
  --color-double-spanish-white: #d2c3a3;
  --color-double-spanish-white-50: #fbf5e7;
  --color-double-spanish-white-100: #eee7d7;
  --color-double-spanish-white-200: #dcd4be;
  --color-double-spanish-white-300: #c1b79d;
  --color-double-spanish-white-400: #ab9d80;
  --color-double-spanish-white-500: #948463;
  --color-double-spanish-white-600: #7d7054;
  --color-double-spanish-white-700: #645a43;
  --color-double-spanish-white-800: #4a4130;
  --color-double-spanish-white-900: #332d21;
  --color-double-spanish-white-950: #1f1a10;
}

SCSS

$double-spanish-white: #d2c3a3;
$double-spanish-white-rgb: 210, 195, 163;
$double-spanish-white-light: mix(#fff, $double-spanish-white, 20%);
$double-spanish-white-dark: mix(#000, $double-spanish-white, 20%);

.element {
  color: $double-spanish-white;
  box-shadow: 0 0 0 2px rgba($double-spanish-white, 0.35);
}