Red City of Morocco

CSS

:root {
  --red-city-of-morocco: #c10c27;
  --red-city-of-morocco-rgb: 193 12 39;
  --red-city-of-morocco-oklch: oklch(0.515 0.203 23.5);
}

.element {
  color: var(--red-city-of-morocco);
  background-color: hsl(351 88% 40%);
  border-color: oklch(0.515 0.203 23.5);
}

Tailwind CSS v4

@theme {
  --color-red-city-of-morocco: #c10c27;
  --color-red-city-of-morocco-50: #ffdfd7;
  --color-red-city-of-morocco-100: #ffcec5;
  --color-red-city-of-morocco-200: #ffb1a7;
  --color-red-city-of-morocco-300: #ff8a80;
  --color-red-city-of-morocco-400: #ff6262;
  --color-red-city-of-morocco-500: #ef303e;
  --color-red-city-of-morocco-600: #ca2c36;
  --color-red-city-of-morocco-700: #a2232b;
  --color-red-city-of-morocco-800: #791721;
  --color-red-city-of-morocco-900: #560f15;
  --color-red-city-of-morocco-950: #390107;
}

SCSS

$red-city-of-morocco: #c10c27;
$red-city-of-morocco-rgb: 193, 12, 39;
$red-city-of-morocco-light: mix(#fff, $red-city-of-morocco, 20%);
$red-city-of-morocco-dark: mix(#000, $red-city-of-morocco, 20%);

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