Flesh Fly

CSS

:root {
  --flesh-fly: #894585;
  --flesh-fly-rgb: 137 69 133;
  --flesh-fly-oklch: oklch(0.499 0.125 329.5);
}

.element {
  color: var(--flesh-fly);
  background-color: hsl(304 33% 40%);
  border-color: oklch(0.499 0.125 329.5);
}

Tailwind CSS v4

@theme {
  --color-flesh-fly: #894585;
  --color-flesh-fly-50: #ffe9ff;
  --color-flesh-fly-100: #ffd9fb;
  --color-flesh-fly-200: #f5c1ed;
  --color-flesh-fly-300: #dda0d5;
  --color-flesh-fly-400: #c882c2;
  --color-flesh-fly-500: #b365ae;
  --color-flesh-fly-600: #975693;
  --color-flesh-fly-700: #794476;
  --color-flesh-fly-800: #593158;
  --color-flesh-fly-900: #3e223e;
  --color-flesh-fly-950: #271127;
}

SCSS

$flesh-fly: #894585;
$flesh-fly-rgb: 137, 69, 133;
$flesh-fly-light: mix(#fff, $flesh-fly, 20%);
$flesh-fly-dark: mix(#000, $flesh-fly, 20%);

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