Morning Glory Pink

CSS

:root {
  --morning-glory-pink: #ca99b7;
  --morning-glory-pink-rgb: 202 153 183;
  --morning-glory-pink-oklch: oklch(0.738 0.071 341.7);
}

.element {
  color: var(--morning-glory-pink);
  background-color: hsl(323 32% 70%);
  border-color: oklch(0.738 0.071 341.7);
}

Tailwind CSS v4

@theme {
  --color-morning-glory-pink: #ca99b7;
  --color-morning-glory-pink-50: #ffeefa;
  --color-morning-glory-pink-100: #fadfee;
  --color-morning-glory-pink-200: #ebc9dc;
  --color-morning-glory-pink-300: #d2aac0;
  --color-morning-glory-pink-400: #bc8eaa;
  --color-morning-glory-pink-500: #a77494;
  --color-morning-glory-pink-600: #8d627d;
  --color-morning-glory-pink-700: #714e64;
  --color-morning-glory-pink-800: #53394a;
  --color-morning-glory-pink-900: #3a2733;
  --color-morning-glory-pink-950: #24151f;
}

SCSS

$morning-glory-pink: #ca99b7;
$morning-glory-pink-rgb: 202, 153, 183;
$morning-glory-pink-light: mix(#fff, $morning-glory-pink, 20%);
$morning-glory-pink-dark: mix(#000, $morning-glory-pink, 20%);

.element {
  color: $morning-glory-pink;
  box-shadow: 0 0 0 2px rgba($morning-glory-pink, 0.35);
}