Sapphire Pink

CSS

:root {
  --sapphire-pink: #887084;
  --sapphire-pink-rgb: 136 112 132;
  --sapphire-pink-oklch: oklch(0.575 0.042 331.8);
}

.element {
  color: var(--sapphire-pink);
  background-color: hsl(310 10% 49%);
  border-color: oklch(0.575 0.042 331.8);
}

Tailwind CSS v4

@theme {
  --color-sapphire-pink: #887084;
  --color-sapphire-pink-50: #fdf1fa;
  --color-sapphire-pink-100: #f1e3ee;
  --color-sapphire-pink-200: #e0cedc;
  --color-sapphire-pink-300: #c5b0c0;
  --color-sapphire-pink-400: #ae96aa;
  --color-sapphire-pink-500: #977c93;
  --color-sapphire-pink-600: #80697c;
  --color-sapphire-pink-700: #665463;
  --color-sapphire-pink-800: #4b3d49;
  --color-sapphire-pink-900: #342a33;
  --color-sapphire-pink-950: #1f181f;
}

SCSS

$sapphire-pink: #887084;
$sapphire-pink-rgb: 136, 112, 132;
$sapphire-pink-light: mix(#fff, $sapphire-pink, 20%);
$sapphire-pink-dark: mix(#000, $sapphire-pink, 20%);

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