Pa Red

CSS

:root {
  --pa-red: #5e3a39;
  --pa-red-rgb: 94 58 57;
  --pa-red-oklch: oklch(0.391 0.051 21.4);
}

.element {
  color: var(--pa-red);
  background-color: hsl(2 25% 30%);
  border-color: oklch(0.391 0.051 21.4);
}

Tailwind CSS v4

@theme {
  --color-pa-red: #5e3a39;
  --color-pa-red-50: #fff0ee;
  --color-pa-red-100: #f9e2e0;
  --color-pa-red-200: #eaccca;
  --color-pa-red-300: #d1aeab;
  --color-pa-red-400: #bb9391;
  --color-pa-red-500: #a67977;
  --color-pa-red-600: #8c6665;
  --color-pa-red-700: #705251;
  --color-pa-red-800: #533b3b;
  --color-pa-red-900: #3a2929;
  --color-pa-red-950: #241716;
}

SCSS

$pa-red: #5e3a39;
$pa-red-rgb: 94, 58, 57;
$pa-red-light: mix(#fff, $pa-red, 20%);
$pa-red-dark: mix(#000, $pa-red, 20%);

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