Cinnamon Roll

CSS

:root {
  --cinnamon-roll: #c0737a;
  --cinnamon-roll-rgb: 192 115 122;
  --cinnamon-roll-oklch: oklch(0.641 0.097 14.3);
}

.element {
  color: var(--cinnamon-roll);
  background-color: hsl(355 38% 60%);
  border-color: oklch(0.641 0.097 14.3);
}

Tailwind CSS v4

@theme {
  --color-cinnamon-roll: #c0737a;
  --color-cinnamon-roll-50: #ffebeb;
  --color-cinnamon-roll-100: #ffdbdd;
  --color-cinnamon-roll-200: #fbc4c6;
  --color-cinnamon-roll-300: #e5a3a6;
  --color-cinnamon-roll-400: #d1868d;
  --color-cinnamon-roll-500: #be6a72;
  --color-cinnamon-roll-600: #a05a61;
  --color-cinnamon-roll-700: #81484d;
  --color-cinnamon-roll-800: #5f3339;
  --color-cinnamon-roll-900: #432327;
  --color-cinnamon-roll-950: #2b1215;
}

SCSS

$cinnamon-roll: #c0737a;
$cinnamon-roll-rgb: 192, 115, 122;
$cinnamon-roll-light: mix(#fff, $cinnamon-roll, 20%);
$cinnamon-roll-dark: mix(#000, $cinnamon-roll, 20%);

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