Liquorice Stick

CSS

:root {
  --liquorice-stick: #b53e3d;
  --liquorice-stick-rgb: 181 62 61;
  --liquorice-stick-oklch: oklch(0.533 0.155 24.4);
}

.element {
  color: var(--liquorice-stick);
  background-color: hsl(0 50% 47%);
  border-color: oklch(0.533 0.155 24.4);
}

Tailwind CSS v4

@theme {
  --color-liquorice-stick: #b53e3d;
  --color-liquorice-stick-50: #ffe5de;
  --color-liquorice-stick-100: #ffd5cd;
  --color-liquorice-stick-200: #ffbbb1;
  --color-liquorice-stick-300: #fd978d;
  --color-liquorice-stick-400: #ec7670;
  --color-liquorice-stick-500: #da5350;
  --color-liquorice-stick-600: #b84745;
  --color-liquorice-stick-700: #943936;
  --color-liquorice-stick-800: #6e2829;
  --color-liquorice-stick-900: #4e1b1b;
  --color-liquorice-stick-950: #330a0c;
}

SCSS

$liquorice-stick: #b53e3d;
$liquorice-stick-rgb: 181, 62, 61;
$liquorice-stick-light: mix(#fff, $liquorice-stick, 20%);
$liquorice-stick-dark: mix(#000, $liquorice-stick, 20%);

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