My Pink

CSS

:root {
  --my-pink: #d68b80;
  --my-pink-rgb: 214 139 128;
  --my-pink-oklch: oklch(0.711 0.094 28.7);
}

.element {
  color: var(--my-pink);
  background-color: hsl(8 51% 67%);
  border-color: oklch(0.711 0.094 28.7);
}

Tailwind CSS v4

@theme {
  --color-my-pink: #d68b80;
  --color-my-pink-50: #ffece5;
  --color-my-pink-100: #ffddd5;
  --color-my-pink-200: #fac6bc;
  --color-my-pink-300: #e3a69a;
  --color-my-pink-400: #d0897f;
  --color-my-pink-500: #bc6d62;
  --color-my-pink-600: #9f5c53;
  --color-my-pink-700: #804a42;
  --color-my-pink-800: #5f3531;
  --color-my-pink-900: #432421;
  --color-my-pink-950: #2b1310;
}

SCSS

$my-pink: #d68b80;
$my-pink-rgb: 214, 139, 128;
$my-pink-light: mix(#fff, $my-pink, 20%);
$my-pink-dark: mix(#000, $my-pink, 20%);

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