French Plum

CSS

:root {
  --french-plum: #811453;
  --french-plum-rgb: 129 20 83;
  --french-plum-oklch: oklch(0.407 0.153 351.4);
}

.element {
  color: var(--french-plum);
  background-color: hsl(325 73% 29%);
  border-color: oklch(0.407 0.153 351.4);
}

Tailwind CSS v4

@theme {
  --color-french-plum: #811453;
  --color-french-plum-50: #ffe4f9;
  --color-french-plum-100: #ffd3ec;
  --color-french-plum-200: #ffb9d9;
  --color-french-plum-300: #f496be;
  --color-french-plum-400: #e175a9;
  --color-french-plum-500: #ce5392;
  --color-french-plum-600: #ae477b;
  --color-french-plum-700: #8c3963;
  --color-french-plum-800: #67284a;
  --color-french-plum-900: #491b34;
  --color-french-plum-950: #2f0b1f;
}

SCSS

$french-plum: #811453;
$french-plum-rgb: 129, 20, 83;
$french-plum-light: mix(#fff, $french-plum, 20%);
$french-plum-dark: mix(#000, $french-plum, 20%);

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