Kirsch Red

CSS

:root {
  --kirsch-red: #974953;
  --kirsch-red-rgb: 151 73 83;
  --kirsch-red-oklch: oklch(0.506 0.105 13.5);
}

.element {
  color: var(--kirsch-red);
  background-color: hsl(352 35% 44%);
  border-color: oklch(0.506 0.105 13.5);
}

Tailwind CSS v4

@theme {
  --color-kirsch-red: #974953;
  --color-kirsch-red-50: #ffeaeb;
  --color-kirsch-red-100: #ffdadc;
  --color-kirsch-red-200: #fec3c5;
  --color-kirsch-red-300: #e8a2a6;
  --color-kirsch-red-400: #d5848c;
  --color-kirsch-red-500: #c16772;
  --color-kirsch-red-600: #a35860;
  --color-kirsch-red-700: #83464d;
  --color-kirsch-red-800: #613239;
  --color-kirsch-red-900: #442227;
  --color-kirsch-red-950: #2c1115;
}

SCSS

$kirsch-red: #974953;
$kirsch-red-rgb: 151, 73, 83;
$kirsch-red-light: mix(#fff, $kirsch-red, 20%);
$kirsch-red-dark: mix(#000, $kirsch-red, 20%);

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