#FEEFFE

CSS

:root {
  --strawberry-bonbon: #feeffe;
  --strawberry-bonbon-rgb: 254 239 254;
  --strawberry-bonbon-oklch: oklch(0.968 0.025 325.8);
}

.element {
  color: var(--strawberry-bonbon);
  background-color: hsl(300 88% 97%);
  border-color: oklch(0.968 0.025 325.8);
}

Tailwind CSS v4

@theme {
  --color-strawberry-bonbon: #feeffe;
  --color-strawberry-bonbon-50: #f9f3f9;
  --color-strawberry-bonbon-100: #ede5ec;
  --color-strawberry-bonbon-200: #dad1da;
  --color-strawberry-bonbon-300: #bfb3be;
  --color-strawberry-bonbon-400: #a799a7;
  --color-strawberry-bonbon-500: #8f818f;
  --color-strawberry-bonbon-600: #796d79;
  --color-strawberry-bonbon-700: #615761;
  --color-strawberry-bonbon-800: #474047;
  --color-strawberry-bonbon-900: #312c31;
  --color-strawberry-bonbon-950: #1d191d;
}

SCSS

$strawberry-bonbon: #feeffe;
$strawberry-bonbon-rgb: 254, 239, 254;
$strawberry-bonbon-light: mix(#fff, $strawberry-bonbon, 20%);
$strawberry-bonbon-dark: mix(#000, $strawberry-bonbon, 20%);

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