Pomace Red

CSS

:root {
  --pomace-red: #856f76;
  --pomace-red-rgb: 133 111 118;
  --pomace-red-oklch: oklch(0.565 0.029 357);
}

.element {
  color: var(--pomace-red);
  background-color: hsl(341 9% 48%);
  border-color: oklch(0.565 0.029 357);
}

Tailwind CSS v4

@theme {
  --color-pomace-red: #856f76;
  --color-pomace-red-50: #fdf2f5;
  --color-pomace-red-100: #f1e4e7;
  --color-pomace-red-200: #e0cfd4;
  --color-pomace-red-300: #c5b1b7;
  --color-pomace-red-400: #ae989f;
  --color-pomace-red-500: #977e86;
  --color-pomace-red-600: #806b72;
  --color-pomace-red-700: #66565b;
  --color-pomace-red-800: #4b3e43;
  --color-pomace-red-900: #342b2e;
  --color-pomace-red-950: #20181b;
}

SCSS

$pomace-red: #856f76;
$pomace-red-rgb: 133, 111, 118;
$pomace-red-light: mix(#fff, $pomace-red, 20%);
$pomace-red-dark: mix(#000, $pomace-red, 20%);

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