Dark Crimson

CSS

:root {
  --dark-crimson: #843c41;
  --dark-crimson-rgb: 132 60 65;
  --dark-crimson-oklch: oklch(0.452 0.099 17.6);
}

.element {
  color: var(--dark-crimson);
  background-color: hsl(356 38% 38%);
  border-color: oklch(0.452 0.099 17.6);
}

Tailwind CSS v4

@theme {
  --color-dark-crimson: #843c41;
  --color-dark-crimson-50: #ffebea;
  --color-dark-crimson-100: #ffdbda;
  --color-dark-crimson-200: #fcc4c3;
  --color-dark-crimson-300: #e6a3a3;
  --color-dark-crimson-400: #d38689;
  --color-dark-crimson-500: #bf696e;
  --color-dark-crimson-600: #a15a5d;
  --color-dark-crimson-700: #81474a;
  --color-dark-crimson-800: #603337;
  --color-dark-crimson-900: #432325;
  --color-dark-crimson-950: #2b1214;
}

SCSS

$dark-crimson: #843c41;
$dark-crimson-rgb: 132, 60, 65;
$dark-crimson-light: mix(#fff, $dark-crimson, 20%);
$dark-crimson-dark: mix(#000, $dark-crimson, 20%);

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