Splash of Grenadine

CSS

:root {
  --splash-of-grenadine: #f984e5;
  --splash-of-grenadine-rgb: 249 132 229;
  --splash-of-grenadine-oklch: oklch(0.774 0.183 333.9);
}

.element {
  color: var(--splash-of-grenadine);
  background-color: hsl(310 91% 75%);
  border-color: oklch(0.774 0.183 333.9);
}

Tailwind CSS v4

@theme {
  --color-splash-of-grenadine: #f984e5;
  --color-splash-of-grenadine-50: #ffe2ff;
  --color-splash-of-grenadine-100: #ffd1ff;
  --color-splash-of-grenadine-200: #ffb6f2;
  --color-splash-of-grenadine-300: #f191db;
  --color-splash-of-grenadine-400: #dd70ca;
  --color-splash-of-grenadine-500: #c94bb7;
  --color-splash-of-grenadine-600: #aa419a;
  --color-splash-of-grenadine-700: #89347c;
  --color-splash-of-grenadine-800: #65255e;
  --color-splash-of-grenadine-900: #471942;
  --color-splash-of-grenadine-950: #2e082a;
}

SCSS

$splash-of-grenadine: #f984e5;
$splash-of-grenadine-rgb: 249, 132, 229;
$splash-of-grenadine-light: mix(#fff, $splash-of-grenadine, 20%);
$splash-of-grenadine-dark: mix(#000, $splash-of-grenadine, 20%);

.element {
  color: $splash-of-grenadine;
  box-shadow: 0 0 0 2px rgba($splash-of-grenadine, 0.35);
}