Harissa Red

CSS

:root {
  --harissa-red: #a52a2a;
  --harissa-red-rgb: 165 42 42;
  --harissa-red-oklch: oklch(0.481 0.16 25.6);
}

.element {
  color: var(--harissa-red);
  background-color: hsl(0 59% 41%);
  border-color: oklch(0.481 0.16 25.6);
}

Tailwind CSS v4

@theme {
  --color-harissa-red: #a52a2a;
  --color-harissa-red-50: #ffe5dc;
  --color-harissa-red-100: #ffd4cb;
  --color-harissa-red-200: #ffbaaf;
  --color-harissa-red-300: #ff968a;
  --color-harissa-red-400: #ee746c;
  --color-harissa-red-500: #dc504c;
  --color-harissa-red-600: #ba4541;
  --color-harissa-red-700: #953733;
  --color-harissa-red-800: #6f2726;
  --color-harissa-red-900: #4f1a1a;
  --color-harissa-red-950: #34090a;
}

SCSS

$harissa-red: #a52a2a;
$harissa-red-rgb: 165, 42, 42;
$harissa-red-light: mix(#fff, $harissa-red, 20%);
$harissa-red-dark: mix(#000, $harissa-red, 20%);

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