Strawberry Cough

CSS

:root {
  --strawberry-cough: #990011;
  --strawberry-cough-rgb: 153 0 17;
  --strawberry-cough-oklch: oklch(0.43 0.175 26.1);
}

.element {
  color: var(--strawberry-cough);
  background-color: hsl(353 100% 30%);
  border-color: oklch(0.43 0.175 26.1);
}

Tailwind CSS v4

@theme {
  --color-strawberry-cough: #990011;
  --color-strawberry-cough-50: #ffe3d9;
  --color-strawberry-cough-100: #ffd2c7;
  --color-strawberry-cough-200: #ffb7aa;
  --color-strawberry-cough-300: #ff9284;
  --color-strawberry-cough-400: #f46f66;
  --color-strawberry-cough-500: #e34843;
  --color-strawberry-cough-600: #bf3e3a;
  --color-strawberry-cough-700: #9a322e;
  --color-strawberry-cough-800: #732222;
  --color-strawberry-cough-900: #511717;
  --color-strawberry-cough-950: #360708;
}

SCSS

$strawberry-cough: #990011;
$strawberry-cough-rgb: 153, 0, 17;
$strawberry-cough-light: mix(#fff, $strawberry-cough, 20%);
$strawberry-cough-dark: mix(#000, $strawberry-cough, 20%);

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