Pie Safe

CSS

:root {
  --pie-safe: #877a64;
  --pie-safe-rgb: 135 122 100;
  --pie-safe-oklch: oklch(0.585 0.036 80.8);
}

.element {
  color: var(--pie-safe);
  background-color: hsl(38 15% 46%);
  border-color: oklch(0.585 0.036 80.8);
}

Tailwind CSS v4

@theme {
  --color-pie-safe: #877a64;
  --color-pie-safe-50: #faf4ea;
  --color-pie-safe-100: #eee7db;
  --color-pie-safe-200: #dcd3c3;
  --color-pie-safe-300: #c0b6a3;
  --color-pie-safe-400: #aa9d87;
  --color-pie-safe-500: #93846c;
  --color-pie-safe-600: #7c705b;
  --color-pie-safe-700: #635949;
  --color-pie-safe-800: #494134;
  --color-pie-safe-900: #332d24;
  --color-pie-safe-950: #1e1a13;
}

SCSS

$pie-safe: #877a64;
$pie-safe-rgb: 135, 122, 100;
$pie-safe-light: mix(#fff, $pie-safe, 20%);
$pie-safe-dark: mix(#000, $pie-safe, 20%);

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