Red Clover

CSS

:root {
  --red-clover: #bb8580;
  --red-clover-rgb: 187 133 128;
  --red-clover-oklch: oklch(0.669 0.067 25);
}

.element {
  color: var(--red-clover);
  background-color: hsl(5 30% 62%);
  border-color: oklch(0.669 0.067 25);
}

Tailwind CSS v4

@theme {
  --color-red-clover: #bb8580;
  --color-red-clover-50: #ffeeeb;
  --color-red-clover-100: #fee0dc;
  --color-red-clover-200: #f0cac5;
  --color-red-clover-300: #d8aba5;
  --color-red-clover-400: #c38f8a;
  --color-red-clover-500: #af7570;
  --color-red-clover-600: #94635f;
  --color-red-clover-700: #764f4b;
  --color-red-clover-800: #583937;
  --color-red-clover-900: #3d2726;
  --color-red-clover-950: #271514;
}

SCSS

$red-clover: #bb8580;
$red-clover-rgb: 187, 133, 128;
$red-clover-light: mix(#fff, $red-clover, 20%);
$red-clover-dark: mix(#000, $red-clover, 20%);

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