Dark Danger

CSS

:root {
  --dark-danger: #2f1212;
  --dark-danger-rgb: 47 18 18;
  --dark-danger-oklch: oklch(0.227 0.048 21.6);
}

.element {
  color: var(--dark-danger);
  background-color: hsl(0 45% 13%);
  border-color: oklch(0.227 0.048 21.6);
}

Tailwind CSS v4

@theme {
  --color-dark-danger: #2f1212;
  --color-dark-danger-50: #fff0ef;
  --color-dark-danger-100: #f8e2e0;
  --color-dark-danger-200: #e8cdcb;
  --color-dark-danger-300: #cfaeac;
  --color-dark-danger-400: #b99492;
  --color-dark-danger-500: #a47a78;
  --color-dark-danger-600: #8a6766;
  --color-dark-danger-700: #6f5351;
  --color-dark-danger-800: #523c3c;
  --color-dark-danger-900: #392929;
  --color-dark-danger-950: #231717;
}

SCSS

$dark-danger: #2f1212;
$dark-danger-rgb: 47, 18, 18;
$dark-danger-light: mix(#fff, $dark-danger, 20%);
$dark-danger-dark: mix(#000, $dark-danger, 20%);

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