My Piazza

CSS

:root {
  --my-piazza: #cfbaa4;
  --my-piazza-rgb: 207 186 164;
  --my-piazza-oklch: oklch(0.801 0.039 68.5);
}

.element {
  color: var(--my-piazza);
  background-color: hsl(31 31% 73%);
  border-color: oklch(0.801 0.039 68.5);
}

Tailwind CSS v4

@theme {
  --color-my-piazza: #cfbaa4;
  --color-my-piazza-50: #fcf4ea;
  --color-my-piazza-100: #f0e6da;
  --color-my-piazza-200: #dfd2c3;
  --color-my-piazza-300: #c4b4a3;
  --color-my-piazza-400: #ae9b86;
  --color-my-piazza-500: #98826b;
  --color-my-piazza-600: #806e5b;
  --color-my-piazza-700: #675848;
  --color-my-piazza-800: #4c4034;
  --color-my-piazza-900: #352c24;
  --color-my-piazza-950: #201913;
}

SCSS

$my-piazza: #cfbaa4;
$my-piazza-rgb: 207, 186, 164;
$my-piazza-light: mix(#fff, $my-piazza, 20%);
$my-piazza-dark: mix(#000, $my-piazza, 20%);

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