Polished Garnet

CSS

:root {
  --polished-garnet: #953640;
  --polished-garnet-rgb: 149 54 64;
  --polished-garnet-oklch: oklch(0.47 0.128 17.3);
}

.element {
  color: var(--polished-garnet);
  background-color: hsl(354 47% 40%);
  border-color: oklch(0.47 0.128 17.3);
}

Tailwind CSS v4

@theme {
  --color-polished-garnet: #953640;
  --color-polished-garnet-50: #ffe7e7;
  --color-polished-garnet-100: #ffd8d7;
  --color-polished-garnet-200: #ffbfbe;
  --color-polished-garnet-300: #f29d9d;
  --color-polished-garnet-400: #df7d83;
  --color-polished-garnet-500: #cd5e67;
  --color-polished-garnet-600: #ad5057;
  --color-polished-garnet-700: #8b4046;
  --color-polished-garnet-800: #672e34;
  --color-polished-garnet-900: #491f23;
  --color-polished-garnet-950: #2f0e12;
}

SCSS

$polished-garnet: #953640;
$polished-garnet-rgb: 149, 54, 64;
$polished-garnet-light: mix(#fff, $polished-garnet, 20%);
$polished-garnet-dark: mix(#000, $polished-garnet, 20%);

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