Solid Pink

CSS

:root {
  --solid-pink: #c78b95;
  --solid-pink-rgb: 199 139 149;
  --solid-pink-oklch: oklch(0.699 0.074 8.2);
}

.element {
  color: var(--solid-pink);
  background-color: hsl(350 35% 66%);
  border-color: oklch(0.699 0.074 8.2);
}

Tailwind CSS v4

@theme {
  --color-solid-pink: #c78b95;
  --color-solid-pink-50: #ffedf0;
  --color-solid-pink-100: #ffdee2;
  --color-solid-pink-200: #f2c8cd;
  --color-solid-pink-300: #daa8ae;
  --color-solid-pink-400: #c68c96;
  --color-solid-pink-500: #b1717d;
  --color-solid-pink-600: #956069;
  --color-solid-pink-700: #784d54;
  --color-solid-pink-800: #59373e;
  --color-solid-pink-900: #3e262b;
  --color-solid-pink-950: #271418;
}

SCSS

$solid-pink: #c78b95;
$solid-pink-rgb: 199, 139, 149;
$solid-pink-light: mix(#fff, $solid-pink, 20%);
$solid-pink-dark: mix(#000, $solid-pink, 20%);

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