Pinch of Clove

CSS

:root {
  --pinch-of-clove: #d2916b;
  --pinch-of-clove-rgb: 210 145 107;
  --pinch-of-clove-oklch: oklch(0.712 0.095 51);
}

.element {
  color: var(--pinch-of-clove);
  background-color: hsl(22 53% 62%);
  border-color: oklch(0.712 0.095 51);
}

Tailwind CSS v4

@theme {
  --color-pinch-of-clove: #d2916b;
  --color-pinch-of-clove-50: #ffeedd;
  --color-pinch-of-clove-100: #ffe0cb;
  --color-pinch-of-clove-200: #f6caaf;
  --color-pinch-of-clove-300: #dfab8a;
  --color-pinch-of-clove-400: #cc8e6a;
  --color-pinch-of-clove-500: #b87349;
  --color-pinch-of-clove-600: #9b613f;
  --color-pinch-of-clove-700: #7d4e32;
  --color-pinch-of-clove-800: #5d3824;
  --color-pinch-of-clove-900: #412618;
  --color-pinch-of-clove-950: #291409;
}

SCSS

$pinch-of-clove: #d2916b;
$pinch-of-clove-rgb: 210, 145, 107;
$pinch-of-clove-light: mix(#fff, $pinch-of-clove, 20%);
$pinch-of-clove-dark: mix(#000, $pinch-of-clove, 20%);

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