Sausage Roll

CSS

:root {
  --sausage-roll: #ebdfcd;
  --sausage-roll-rgb: 235 223 205;
  --sausage-roll-oklch: oklch(0.908 0.027 78.2);
}

.element {
  color: var(--sausage-roll);
  background-color: hsl(36 43% 86%);
  border-color: oklch(0.908 0.027 78.2);
}

Tailwind CSS v4

@theme {
  --color-sausage-roll: #ebdfcd;
  --color-sausage-roll-50: #f9f4ed;
  --color-sausage-roll-100: #ede7de;
  --color-sausage-roll-200: #dad3c7;
  --color-sausage-roll-300: #bfb6a8;
  --color-sausage-roll-400: #a79d8d;
  --color-sausage-roll-500: #908472;
  --color-sausage-roll-600: #7a7061;
  --color-sausage-roll-700: #625a4d;
  --color-sausage-roll-800: #484138;
  --color-sausage-roll-900: #322d26;
  --color-sausage-roll-950: #1e1a15;
}

SCSS

$sausage-roll: #ebdfcd;
$sausage-roll-rgb: 235, 223, 205;
$sausage-roll-light: mix(#fff, $sausage-roll, 20%);
$sausage-roll-dark: mix(#000, $sausage-roll, 20%);

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