Baker-Miller Pink

CSS

:root {
  --baker-miller-pink: #ff92ae;
  --baker-miller-pink-rgb: 255 146 174;
  --baker-miller-pink-oklch: oklch(0.783 0.134 4.2);
}

.element {
  color: var(--baker-miller-pink);
  background-color: hsl(345 100% 79%);
  border-color: oklch(0.783 0.134 4.2);
}

Tailwind CSS v4

@theme {
  --color-baker-miller-pink: #ff92ae;
  --color-baker-miller-pink-50: #ffe6ef;
  --color-baker-miller-pink-100: #ffd6e1;
  --color-baker-miller-pink-200: #ffbdcb;
  --color-baker-miller-pink-300: #f29aad;
  --color-baker-miller-pink-400: #df7b95;
  --color-baker-miller-pink-500: #cc5a7c;
  --color-baker-miller-pink-600: #ad4d69;
  --color-baker-miller-pink-700: #8b3e54;
  --color-baker-miller-pink-800: #672c3f;
  --color-baker-miller-pink-900: #481e2b;
  --color-baker-miller-pink-950: #2f0d18;
}

SCSS

$baker-miller-pink: #ff92ae;
$baker-miller-pink-rgb: 255, 146, 174;
$baker-miller-pink-light: mix(#fff, $baker-miller-pink, 20%);
$baker-miller-pink-dark: mix(#000, $baker-miller-pink, 20%);

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