Clotted Red

CSS

:root {
  --clotted-red: #991115;
  --clotted-red-rgb: 153 17 21;
  --clotted-red-oklch: oklch(0.437 0.168 26.9);
}

.element {
  color: var(--clotted-red);
  background-color: hsl(358 80% 33%);
  border-color: oklch(0.437 0.168 26.9);
}

Tailwind CSS v4

@theme {
  --color-clotted-red: #991115;
  --color-clotted-red-50: #ffe4da;
  --color-clotted-red-100: #ffd3c8;
  --color-clotted-red-200: #ffb9ab;
  --color-clotted-red-300: #ff9485;
  --color-clotted-red-400: #f17267;
  --color-clotted-red-500: #e04c44;
  --color-clotted-red-600: #bd423b;
  --color-clotted-red-700: #98352f;
  --color-clotted-red-800: #712423;
  --color-clotted-red-900: #501817;
  --color-clotted-red-950: #350808;
}

SCSS

$clotted-red: #991115;
$clotted-red-rgb: 153, 17, 21;
$clotted-red-light: mix(#fff, $clotted-red, 20%);
$clotted-red-dark: mix(#000, $clotted-red, 20%);

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