Assassin’s Red

CSS

:root {
  --assassin-s-red: #f60206;
  --assassin-s-red-rgb: 246 2 6;
  --assassin-s-red-oklch: oklch(0.612 0.25 28.9);
}

.element {
  color: var(--assassin-s-red);
  background-color: hsl(359 98% 49%);
  border-color: oklch(0.612 0.25 28.9);
}

Tailwind CSS v4

@theme {
  --color-assassin-s-red: #f60206;
  --color-assassin-s-red-50: #ffdbca;
  --color-assassin-s-red-100: #ffc8b5;
  --color-assassin-s-red-200: #ffa891;
  --color-assassin-s-red-300: #ff7c63;
  --color-assassin-s-red-400: #ff4a3b;
  --color-assassin-s-red-500: #ff0000;
  --color-assassin-s-red-600: #da0000;
  --color-assassin-s-red-700: #b00000;
  --color-assassin-s-red-800: #840004;
  --color-assassin-s-red-900: #5e0003;
  --color-assassin-s-red-950: #3f0000;
}

SCSS

$assassin-s-red: #f60206;
$assassin-s-red-rgb: 246, 2, 6;
$assassin-s-red-light: mix(#fff, $assassin-s-red, 20%);
$assassin-s-red-dark: mix(#000, $assassin-s-red, 20%);

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