Quills of Terico

CSS

:root {
  --quills-of-terico: #612741;
  --quills-of-terico-rgb: 97 39 65;
  --quills-of-terico-oklch: oklch(0.364 0.09 354.4);
}

.element {
  color: var(--quills-of-terico);
  background-color: hsl(333 43% 27%);
  border-color: oklch(0.364 0.09 354.4);
}

Tailwind CSS v4

@theme {
  --color-quills-of-terico: #612741;
  --color-quills-of-terico-50: #ffebf6;
  --color-quills-of-terico-100: #ffdce8;
  --color-quills-of-terico-200: #f5c5d5;
  --color-quills-of-terico-300: #dea5b8;
  --color-quills-of-terico-400: #c988a2;
  --color-quills-of-terico-500: #b56c8a;
  --color-quills-of-terico-600: #995c75;
  --color-quills-of-terico-700: #7a495d;
  --color-quills-of-terico-800: #5a3545;
  --color-quills-of-terico-900: #3f2430;
  --color-quills-of-terico-950: #28131c;
}

SCSS

$quills-of-terico: #612741;
$quills-of-terico-rgb: 97, 39, 65;
$quills-of-terico-light: mix(#fff, $quills-of-terico, 20%);
$quills-of-terico-dark: mix(#000, $quills-of-terico, 20%);

.element {
  color: $quills-of-terico;
  box-shadow: 0 0 0 2px rgba($quills-of-terico, 0.35);
}