Brown Knapweed

CSS

:root {
  --brown-knapweed: #f485ac;
  --brown-knapweed-rgb: 244 133 172;
  --brown-knapweed-oklch: oklch(0.749 0.141 358.7);
}

.element {
  color: var(--brown-knapweed);
  background-color: hsl(339 83% 74%);
  border-color: oklch(0.749 0.141 358.7);
}

Tailwind CSS v4

@theme {
  --color-brown-knapweed: #f485ac;
  --color-brown-knapweed-50: #ffe5f3;
  --color-brown-knapweed-100: #ffd5e5;
  --color-brown-knapweed-200: #ffbbd1;
  --color-brown-knapweed-300: #f398b3;
  --color-brown-knapweed-400: #e0789d;
  --color-brown-knapweed-500: #cd5885;
  --color-brown-knapweed-600: #ad4b70;
  --color-brown-knapweed-700: #8b3c5a;
  --color-brown-knapweed-800: #672a43;
  --color-brown-knapweed-900: #491d2e;
  --color-brown-knapweed-950: #2f0c1b;
}

SCSS

$brown-knapweed: #f485ac;
$brown-knapweed-rgb: 244, 133, 172;
$brown-knapweed-light: mix(#fff, $brown-knapweed, 20%);
$brown-knapweed-dark: mix(#000, $brown-knapweed, 20%);

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