Spanish Crimson

CSS

:root {
  --spanish-crimson: #e51a4c;
  --spanish-crimson-rgb: 229 26 76;
  --spanish-crimson-oklch: oklch(0.593 0.227 16.5);
}

.element {
  color: var(--spanish-crimson);
  background-color: hsl(345 80% 50%);
  border-color: oklch(0.593 0.227 16.5);
}

Tailwind CSS v4

@theme {
  --color-spanish-crimson: #e51a4c;
  --color-spanish-crimson-50: #ffdbdc;
  --color-spanish-crimson-100: #ffc9cb;
  --color-spanish-crimson-200: #ffaaaf;
  --color-spanish-crimson-300: #ff808a;
  --color-spanish-crimson-400: #ff546e;
  --color-spanish-crimson-500: #f8004e;
  --color-spanish-crimson-600: #d10d43;
  --color-spanish-crimson-700: #a80d35;
  --color-spanish-crimson-800: #7e0629;
  --color-spanish-crimson-900: #59051b;
  --color-spanish-crimson-950: #3c000c;
}

SCSS

$spanish-crimson: #e51a4c;
$spanish-crimson-rgb: 229, 26, 76;
$spanish-crimson-light: mix(#fff, $spanish-crimson, 20%);
$spanish-crimson-dark: mix(#000, $spanish-crimson, 20%);

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