Decadent Red

CSS

:root {
  --decadent-red: #8d3630;
  --decadent-red-rgb: 141 54 48;
  --decadent-red-oklch: oklch(0.454 0.12 26.8);
}

.element {
  color: var(--decadent-red);
  background-color: hsl(4 49% 37%);
  border-color: oklch(0.454 0.12 26.8);
}

Tailwind CSS v4

@theme {
  --color-decadent-red: #8d3630;
  --color-decadent-red-50: #ffe9e2;
  --color-decadent-red-100: #ffdad1;
  --color-decadent-red-200: #ffc2b7;
  --color-decadent-red-300: #eea094;
  --color-decadent-red-400: #dc8178;
  --color-decadent-red-500: #c9635a;
  --color-decadent-red-600: #aa544d;
  --color-decadent-red-700: #89433d;
  --color-decadent-red-800: #66302d;
  --color-decadent-red-900: #47211e;
  --color-decadent-red-950: #2e100e;
}

SCSS

$decadent-red: #8d3630;
$decadent-red-rgb: 141, 54, 48;
$decadent-red-light: mix(#fff, $decadent-red, 20%);
$decadent-red-dark: mix(#000, $decadent-red, 20%);

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