Black-Hearted

CSS

:root {
  --black-hearted: #3e1825;
  --black-hearted-rgb: 62 24 37;
  --black-hearted-oklch: oklch(0.271 0.062 0.5);
}

.element {
  color: var(--black-hearted);
  background-color: hsl(339 44% 17%);
  border-color: oklch(0.271 0.062 0.5);
}

Tailwind CSS v4

@theme {
  --color-black-hearted: #3e1825;
  --color-black-hearted-50: #ffeef3;
  --color-black-hearted-100: #fbe0e6;
  --color-black-hearted-200: #eccad2;
  --color-black-hearted-300: #d4abb4;
  --color-black-hearted-400: #be909c;
  --color-black-hearted-500: #a97584;
  --color-black-hearted-600: #8f6370;
  --color-black-hearted-700: #724f59;
  --color-black-hearted-800: #543942;
  --color-black-hearted-900: #3b272e;
  --color-black-hearted-950: #25151a;
}

SCSS

$black-hearted: #3e1825;
$black-hearted-rgb: 62, 24, 37;
$black-hearted-light: mix(#fff, $black-hearted, 20%);
$black-hearted-dark: mix(#000, $black-hearted, 20%);

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