Cinnamon Sand

CSS

:root {
  --cinnamon-sand: #b78153;
  --cinnamon-sand-rgb: 183 129 83;
  --cinnamon-sand-oklch: oklch(0.647 0.091 60.6);
}

.element {
  color: var(--cinnamon-sand);
  background-color: hsl(28 41% 52%);
  border-color: oklch(0.647 0.091 60.6);
}

Tailwind CSS v4

@theme {
  --color-cinnamon-sand: #b78153;
  --color-cinnamon-sand-50: #fff0db;
  --color-cinnamon-sand-100: #ffe2c9;
  --color-cinnamon-sand-200: #f1ccad;
  --color-cinnamon-sand-300: #daae87;
  --color-cinnamon-sand-400: #c69266;
  --color-cinnamon-sand-500: #b27743;
  --color-cinnamon-sand-600: #96653a;
  --color-cinnamon-sand-700: #79512e;
  --color-cinnamon-sand-800: #5a3a21;
  --color-cinnamon-sand-900: #3f2815;
  --color-cinnamon-sand-950: #281607;
}

SCSS

$cinnamon-sand: #b78153;
$cinnamon-sand-rgb: 183, 129, 83;
$cinnamon-sand-light: mix(#fff, $cinnamon-sand, 20%);
$cinnamon-sand-dark: mix(#000, $cinnamon-sand, 20%);

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