Cinnamon Stick

CSS

:root {
  --cinnamon-stick: #b05127;
  --cinnamon-stick-rgb: 176 81 39;
  --cinnamon-stick-oklch: oklch(0.548 0.136 42.6);
}

.element {
  color: var(--cinnamon-stick);
  background-color: hsl(18 64% 42%);
  border-color: oklch(0.548 0.136 42.6);
}

Tailwind CSS v4

@theme {
  --color-cinnamon-stick: #b05127;
  --color-cinnamon-stick-50: #ffead6;
  --color-cinnamon-stick-100: #ffdac3;
  --color-cinnamon-stick-200: #ffc2a5;
  --color-cinnamon-stick-300: #f2a17d;
  --color-cinnamon-stick-400: #e1815b;
  --color-cinnamon-stick-500: #ce6233;
  --color-cinnamon-stick-600: #ae542d;
  --color-cinnamon-stick-700: #8c4324;
  --color-cinnamon-stick-800: #682f1a;
  --color-cinnamon-stick-900: #492011;
  --color-cinnamon-stick-950: #300f04;
}

SCSS

$cinnamon-stick: #b05127;
$cinnamon-stick-rgb: 176, 81, 39;
$cinnamon-stick-light: mix(#fff, $cinnamon-stick, 20%);
$cinnamon-stick-dark: mix(#000, $cinnamon-stick, 20%);

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