Wild Aster

CSS

:root {
  --wild-aster: #a53783;
  --wild-aster-rgb: 165 55 131;
  --wild-aster-oklch: oklch(0.52 0.167 342.2);
}

.element {
  color: var(--wild-aster);
  background-color: hsl(319 50% 43%);
  border-color: oklch(0.52 0.167 342.2);
}

Tailwind CSS v4

@theme {
  --color-wild-aster: #a53783;
  --color-wild-aster-50: #ffe3ff;
  --color-wild-aster-100: #ffd2f5;
  --color-wild-aster-200: #ffb8e6;
  --color-wild-aster-300: #f393cc;
  --color-wild-aster-400: #df72b9;
  --color-wild-aster-500: #cc4fa4;
  --color-wild-aster-600: #ac448b;
  --color-wild-aster-700: #8b366f;
  --color-wild-aster-800: #662754;
  --color-wild-aster-900: #481a3b;
  --color-wild-aster-950: #2f0a25;
}

SCSS

$wild-aster: #a53783;
$wild-aster-rgb: 165, 55, 131;
$wild-aster-light: mix(#fff, $wild-aster, 20%);
$wild-aster-dark: mix(#000, $wild-aster, 20%);

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