Pure Pleasure

CSS

:root {
  --pure-pleasure: #f51360;
  --pure-pleasure-rgb: 245 19 96;
  --pure-pleasure-oklch: oklch(0.623 0.243 11.6);
}

.element {
  color: var(--pure-pleasure);
  background-color: hsl(340 92% 52%);
  border-color: oklch(0.623 0.243 11.6);
}

Tailwind CSS v4

@theme {
  --color-pure-pleasure: #f51360;
  --color-pure-pleasure-50: #ffd9e0;
  --color-pure-pleasure-100: #ffc6d0;
  --color-pure-pleasure-200: #ffa6b5;
  --color-pure-pleasure-300: #ff7a92;
  --color-pure-pleasure-400: #ff4979;
  --color-pure-pleasure-500: #fd005b;
  --color-pure-pleasure-600: #d5004d;
  --color-pure-pleasure-700: #ac003e;
  --color-pure-pleasure-800: #80002f;
  --color-pure-pleasure-900: #5b0020;
  --color-pure-pleasure-950: #3d0010;
}

SCSS

$pure-pleasure: #f51360;
$pure-pleasure-rgb: 245, 19, 96;
$pure-pleasure-light: mix(#fff, $pure-pleasure, 20%);
$pure-pleasure-dark: mix(#000, $pure-pleasure, 20%);

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