A Lot of Love

CSS

:root {
  --a-lot-of-love: #ffbcc5;
  --a-lot-of-love-rgb: 255 188 197;
  --a-lot-of-love-oklch: oklch(0.859 0.078 9.9);
}

.element {
  color: var(--a-lot-of-love);
  background-color: hsl(352 100% 87%);
  border-color: oklch(0.859 0.078 9.9);
}

Tailwind CSS v4

@theme {
  --color-a-lot-of-love: #ffbcc5;
  --color-a-lot-of-love-50: #ffedef;
  --color-a-lot-of-love-100: #ffdee1;
  --color-a-lot-of-love-200: #f4c7cb;
  --color-a-lot-of-love-300: #dca7ad;
  --color-a-lot-of-love-400: #c88b94;
  --color-a-lot-of-love-500: #b3707a;
  --color-a-lot-of-love-600: #975f68;
  --color-a-lot-of-love-700: #794c53;
  --color-a-lot-of-love-800: #5a373d;
  --color-a-lot-of-love-900: #3f252a;
  --color-a-lot-of-love-950: #281418;
}

SCSS

$a-lot-of-love: #ffbcc5;
$a-lot-of-love-rgb: 255, 188, 197;
$a-lot-of-love-light: mix(#fff, $a-lot-of-love, 20%);
$a-lot-of-love-dark: mix(#000, $a-lot-of-love, 20%);

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