Kurenai Red

CSS

:root {
  --kurenai-red: #d7003a;
  --kurenai-red-rgb: 215 0 58;
  --kurenai-red-oklch: oklch(0.557 0.223 19.3);
}

.element {
  color: var(--kurenai-red);
  background-color: hsl(344 100% 42%);
  border-color: oklch(0.557 0.223 19.3);
}

Tailwind CSS v4

@theme {
  --color-kurenai-red: #d7003a;
  --color-kurenai-red-50: #ffdcd9;
  --color-kurenai-red-100: #ffcac7;
  --color-kurenai-red-200: #ffacaa;
  --color-kurenai-red-300: #ff8284;
  --color-kurenai-red-400: #ff5667;
  --color-kurenai-red-500: #f70b45;
  --color-kurenai-red-600: #d0153c;
  --color-kurenai-red-700: #a8122f;
  --color-kurenai-red-800: #7d0924;
  --color-kurenai-red-900: #590718;
  --color-kurenai-red-950: #3c0009;
}

SCSS

$kurenai-red: #d7003a;
$kurenai-red-rgb: 215, 0, 58;
$kurenai-red-light: mix(#fff, $kurenai-red, 20%);
$kurenai-red-dark: mix(#000, $kurenai-red, 20%);

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