Bloody Rust

CSS

:root {
  --bloody-rust: #da2c43;
  --bloody-rust-rgb: 218 44 67;
  --bloody-rust-oklch: oklch(0.581 0.207 20.3);
}

.element {
  color: var(--bloody-rust);
  background-color: hsl(352 70% 51%);
  border-color: oklch(0.581 0.207 20.3);
}

Tailwind CSS v4

@theme {
  --color-bloody-rust: #da2c43;
  --color-bloody-rust-50: #ffdeda;
  --color-bloody-rust-100: #ffcdc8;
  --color-bloody-rust-200: #ffafac;
  --color-bloody-rust-300: #ff8786;
  --color-bloody-rust-400: #ff5f69;
  --color-bloody-rust-500: #f02a48;
  --color-bloody-rust-600: #cb283d;
  --color-bloody-rust-700: #a32031;
  --color-bloody-rust-800: #7a1425;
  --color-bloody-rust-900: #560e19;
  --color-bloody-rust-950: #3a000a;
}

SCSS

$bloody-rust: #da2c43;
$bloody-rust-rgb: 218, 44, 67;
$bloody-rust-light: mix(#fff, $bloody-rust, 20%);
$bloody-rust-dark: mix(#000, $bloody-rust, 20%);

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