Pink Jazz

CSS

:root {
  --pink-jazz: #9e6b89;
  --pink-jazz-rgb: 158 107 137;
  --pink-jazz-oklch: oklch(0.591 0.077 343.6);
}

.element {
  color: var(--pink-jazz);
  background-color: hsl(325 21% 52%);
  border-color: oklch(0.591 0.077 343.6);
}

Tailwind CSS v4

@theme {
  --color-pink-jazz: #9e6b89;
  --color-pink-jazz-50: #ffedfa;
  --color-pink-jazz-100: #fcdeed;
  --color-pink-jazz-200: #eec8db;
  --color-pink-jazz-300: #d5a8c0;
  --color-pink-jazz-400: #bf8daa;
  --color-pink-jazz-500: #aa7293;
  --color-pink-jazz-600: #90607c;
  --color-pink-jazz-700: #734d64;
  --color-pink-jazz-800: #55384a;
  --color-pink-jazz-900: #3b2633;
  --color-pink-jazz-950: #25141f;
}

SCSS

$pink-jazz: #9e6b89;
$pink-jazz-rgb: 158, 107, 137;
$pink-jazz-light: mix(#fff, $pink-jazz, 20%);
$pink-jazz-dark: mix(#000, $pink-jazz, 20%);

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