Cupid’s Eye

CSS

:root {
  --cupid-s-eye: #ff22dd;
  --cupid-s-eye-rgb: 255 34 221;
  --cupid-s-eye-oklch: oklch(0.69 0.292 336.2);
}

.element {
  color: var(--cupid-s-eye);
  background-color: hsl(309 100% 57%);
  border-color: oklch(0.69 0.292 336.2);
}

Tailwind CSS v4

@theme {
  --color-cupid-s-eye: #ff22dd;
  --color-cupid-s-eye-50: #ffd5ff;
  --color-cupid-s-eye-100: #ffc1ff;
  --color-cupid-s-eye-200: #ff9fff;
  --color-cupid-s-eye-300: #ff6fea;
  --color-cupid-s-eye-400: #fe38dd;
  --color-cupid-s-eye-500: #ed00cc;
  --color-cupid-s-eye-600: #c800ac;
  --color-cupid-s-eye-700: #a1008a;
  --color-cupid-s-eye-800: #77006a;
  --color-cupid-s-eye-900: #54004a;
  --color-cupid-s-eye-950: #380031;
}

SCSS

$cupid-s-eye: #ff22dd;
$cupid-s-eye-rgb: 255, 34, 221;
$cupid-s-eye-light: mix(#fff, $cupid-s-eye, 20%);
$cupid-s-eye-dark: mix(#000, $cupid-s-eye, 20%);

.element {
  color: $cupid-s-eye;
  box-shadow: 0 0 0 2px rgba($cupid-s-eye, 0.35);
}