Spanish Red

CSS

:root {
  --spanish-red: #e60026;
  --spanish-red-rgb: 230 0 38;
  --spanish-red-oklch: oklch(0.583 0.236 25);
}

.element {
  color: var(--spanish-red);
  background-color: hsl(350 100% 45%);
  border-color: oklch(0.583 0.236 25);
}

Tailwind CSS v4

@theme {
  --color-spanish-red: #e60026;
  --color-spanish-red-50: #ffdcd1;
  --color-spanish-red-100: #ffc9bd;
  --color-spanish-red-200: #ffaa9d;
  --color-spanish-red-300: #ff7f73;
  --color-spanish-red-400: #ff5151;
  --color-spanish-red-500: #fd0025;
  --color-spanish-red-600: #d60022;
  --color-spanish-red-700: #ac031b;
  --color-spanish-red-800: #810016;
  --color-spanish-red-900: #5b030e;
  --color-spanish-red-950: #3d0002;
}

SCSS

$spanish-red: #e60026;
$spanish-red-rgb: 230, 0, 38;
$spanish-red-light: mix(#fff, $spanish-red, 20%);
$spanish-red-dark: mix(#000, $spanish-red, 20%);

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