Yíng Guāng Sè Pink

CSS

:root {
  --ying-guang-se-pink: #ff69af;
  --ying-guang-se-pink-rgb: 255 105 175;
  --ying-guang-se-pink-oklch: oklch(0.727 0.195 354);
}

.element {
  color: var(--ying-guang-se-pink);
  background-color: hsl(332 100% 71%);
  border-color: oklch(0.727 0.195 354);
}

Tailwind CSS v4

@theme {
  --color-ying-guang-se-pink: #ff69af;
  --color-ying-guang-se-pink-50: #ffdff7;
  --color-ying-guang-se-pink-100: #ffcdea;
  --color-ying-guang-se-pink-200: #ffb1d7;
  --color-ying-guang-se-pink-300: #ff8abb;
  --color-ying-guang-se-pink-400: #f265a6;
  --color-ying-guang-se-pink-500: #e0398f;
  --color-ying-guang-se-pink-600: #bd3379;
  --color-ying-guang-se-pink-700: #982861;
  --color-ying-guang-se-pink-800: #711c49;
  --color-ying-guang-se-pink-900: #501233;
  --color-ying-guang-se-pink-950: #34031f;
}

SCSS

$ying-guang-se-pink: #ff69af;
$ying-guang-se-pink-rgb: 255, 105, 175;
$ying-guang-se-pink-light: mix(#fff, $ying-guang-se-pink, 20%);
$ying-guang-se-pink-dark: mix(#000, $ying-guang-se-pink, 20%);

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