Be My Valentine

CSS

:root {
  --be-my-valentine: #ec9dc3;
  --be-my-valentine-rgb: 236 157 195;
  --be-my-valentine-oklch: oklch(0.785 0.105 349.5);
}

.element {
  color: var(--be-my-valentine);
  background-color: hsl(331 68% 77%);
  border-color: oklch(0.785 0.105 349.5);
}

Tailwind CSS v4

@theme {
  --color-be-my-valentine: #ec9dc3;
  --color-be-my-valentine-50: #ffe9f9;
  --color-be-my-valentine-100: #ffdaec;
  --color-be-my-valentine-200: #f9c2d9;
  --color-be-my-valentine-300: #e2a1bd;
  --color-be-my-valentine-400: #cd84a8;
  --color-be-my-valentine-500: #b96791;
  --color-be-my-valentine-600: #9c587a;
  --color-be-my-valentine-700: #7e4662;
  --color-be-my-valentine-800: #5d3349;
  --color-be-my-valentine-900: #412233;
  --color-be-my-valentine-950: #29111e;
}

SCSS

$be-my-valentine: #ec9dc3;
$be-my-valentine-rgb: 236, 157, 195;
$be-my-valentine-light: mix(#fff, $be-my-valentine, 20%);
$be-my-valentine-dark: mix(#000, $be-my-valentine, 20%);

.element {
  color: $be-my-valentine;
  box-shadow: 0 0 0 2px rgba($be-my-valentine, 0.35);
}