Marble Red

CSS

:root {
  --marble-red: #a9606e;
  --marble-red-rgb: 169 96 110;
  --marble-red-oklch: oklch(0.576 0.096 8.2);
}

.element {
  color: var(--marble-red);
  background-color: hsl(348 30% 52%);
  border-color: oklch(0.576 0.096 8.2);
}

Tailwind CSS v4

@theme {
  --color-marble-red: #a9606e;
  --color-marble-red-50: #ffebef;
  --color-marble-red-100: #ffdbe0;
  --color-marble-red-200: #fac4cb;
  --color-marble-red-300: #e4a3ac;
  --color-marble-red-400: #d08693;
  --color-marble-red-500: #bc6a7a;
  --color-marble-red-600: #9f5a67;
  --color-marble-red-700: #7f4852;
  --color-marble-red-800: #5e343d;
  --color-marble-red-900: #42232a;
  --color-marble-red-950: #2a1218;
}

SCSS

$marble-red: #a9606e;
$marble-red-rgb: 169, 96, 110;
$marble-red-light: mix(#fff, $marble-red, 20%);
$marble-red-dark: mix(#000, $marble-red, 20%);

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