Garnet Sand

CSS

:root {
  --garnet-sand: #cc7446;
  --garnet-sand-rgb: 204 116 70;
  --garnet-sand-oklch: oklch(0.648 0.126 47.1);
}

.element {
  color: var(--garnet-sand);
  background-color: hsl(21 57% 54%);
  border-color: oklch(0.648 0.126 47.1);
}

Tailwind CSS v4

@theme {
  --color-garnet-sand: #cc7446;
  --color-garnet-sand-50: #ffebd6;
  --color-garnet-sand-100: #ffdcc3;
  --color-garnet-sand-200: #ffc5a5;
  --color-garnet-sand-300: #eca47d;
  --color-garnet-sand-400: #db865a;
  --color-garnet-sand-500: #c86833;
  --color-garnet-sand-600: #a9582d;
  --color-garnet-sand-700: #884723;
  --color-garnet-sand-800: #653219;
  --color-garnet-sand-900: #472210;
  --color-garnet-sand-950: #2e1104;
}

SCSS

$garnet-sand: #cc7446;
$garnet-sand-rgb: 204, 116, 70;
$garnet-sand-light: mix(#fff, $garnet-sand, 20%);
$garnet-sand-dark: mix(#000, $garnet-sand, 20%);

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