Bloody Safflower

CSS

:root {
  --bloody-safflower: #c53d43;
  --bloody-safflower-rgb: 197 61 67;
  --bloody-safflower-oklch: oklch(0.559 0.172 22.3);
}

.element {
  color: var(--bloody-safflower);
  background-color: hsl(357 54% 51%);
  border-color: oklch(0.559 0.172 22.3);
}

Tailwind CSS v4

@theme {
  --color-bloody-safflower: #c53d43;
  --color-bloody-safflower-50: #ffe3dd;
  --color-bloody-safflower-100: #ffd2cc;
  --color-bloody-safflower-200: #ffb7b0;
  --color-bloody-safflower-300: #ff928b;
  --color-bloody-safflower-400: #f36f6e;
  --color-bloody-safflower-500: #e1484f;
  --color-bloody-safflower-600: #be3f43;
  --color-bloody-safflower-700: #993235;
  --color-bloody-safflower-800: #722228;
  --color-bloody-safflower-900: #51171b;
  --color-bloody-safflower-950: #35070b;
}

SCSS

$bloody-safflower: #c53d43;
$bloody-safflower-rgb: 197, 61, 67;
$bloody-safflower-light: mix(#fff, $bloody-safflower, 20%);
$bloody-safflower-dark: mix(#000, $bloody-safflower, 20%);

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