Charred Brown

CSS

:root {
  --charred-brown: #3e0007;
  --charred-brown-rgb: 62 0 7;
  --charred-brown-oklch: oklch(0.23 0.093 21.9);
}

.element {
  color: var(--charred-brown);
  background-color: hsl(353 100% 12%);
  border-color: oklch(0.23 0.093 21.9);
}

Tailwind CSS v4

@theme {
  --color-charred-brown: #3e0007;
  --color-charred-brown-50: #ffece8;
  --color-charred-brown-100: #ffddd9;
  --color-charred-brown-200: #fac6c1;
  --color-charred-brown-300: #e3a5a0;
  --color-charred-brown-400: #d08886;
  --color-charred-brown-500: #bc6c6a;
  --color-charred-brown-600: #9f5c5a;
  --color-charred-brown-700: #7f4948;
  --color-charred-brown-800: #5e3535;
  --color-charred-brown-900: #422424;
  --color-charred-brown-950: #2a1313;
}

SCSS

$charred-brown: #3e0007;
$charred-brown-rgb: 62, 0, 7;
$charred-brown-light: mix(#fff, $charred-brown, 20%);
$charred-brown-dark: mix(#000, $charred-brown, 20%);

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