Strawberry Milk

CSS

:root {
  --strawberry-milk: #ffd9e7;
  --strawberry-milk-rgb: 255 217 231;
  --strawberry-milk-oklch: oklch(0.921 0.046 353.9);
}

.element {
  color: var(--strawberry-milk);
  background-color: hsl(338 100% 93%);
  border-color: oklch(0.921 0.046 353.9);
}

Tailwind CSS v4

@theme {
  --color-strawberry-milk: #ffd9e7;
  --color-strawberry-milk-50: #fff0f5;
  --color-strawberry-milk-100: #f5e2e8;
  --color-strawberry-milk-200: #e5cdd5;
  --color-strawberry-milk-300: #ccaeb8;
  --color-strawberry-milk-400: #b594a0;
  --color-strawberry-milk-500: #9f7a88;
  --color-strawberry-milk-600: #876773;
  --color-strawberry-milk-700: #6c535c;
  --color-strawberry-milk-800: #4f3c44;
  --color-strawberry-milk-900: #37292f;
  --color-strawberry-milk-950: #22171c;
}

SCSS

$strawberry-milk: #ffd9e7;
$strawberry-milk-rgb: 255, 217, 231;
$strawberry-milk-light: mix(#fff, $strawberry-milk, 20%);
$strawberry-milk-dark: mix(#000, $strawberry-milk, 20%);

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