#F6BDE3

CSS

:root {
  --pretty-in-pink: #f6bde3;
  --pretty-in-pink-rgb: 246 189 227;
  --pretty-in-pink-oklch: oklch(0.861 0.081 339.1);
}

.element {
  color: var(--pretty-in-pink);
  background-color: hsl(320 76% 85%);
  border-color: oklch(0.861 0.081 339.1);
}

Tailwind CSS v4

@theme {
  --color-pretty-in-pink: #f6bde3;
  --color-pretty-in-pink-50: #ffedfc;
  --color-pretty-in-pink-100: #fcdef0;
  --color-pretty-in-pink-200: #eec7df;
  --color-pretty-in-pink-300: #d5a8c4;
  --color-pretty-in-pink-400: #bf8cae;
  --color-pretty-in-pink-500: #aa7198;
  --color-pretty-in-pink-600: #906081;
  --color-pretty-in-pink-700: #734c67;
  --color-pretty-in-pink-800: #55374d;
  --color-pretty-in-pink-900: #3b2635;
  --color-pretty-in-pink-950: #251420;
}

SCSS

$pretty-in-pink: #f6bde3;
$pretty-in-pink-rgb: 246, 189, 227;
$pretty-in-pink-light: mix(#fff, $pretty-in-pink, 20%);
$pretty-in-pink-dark: mix(#000, $pretty-in-pink, 20%);

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