Cold Purple

CSS

:root {
  --cold-purple: #9d8abf;
  --cold-purple-rgb: 157 138 191;
  --cold-purple-oklch: oklch(0.67 0.08 300.7);
}

.element {
  color: var(--cold-purple);
  background-color: hsl(262 29% 65%);
  border-color: oklch(0.67 0.08 300.7);
}

Tailwind CSS v4

@theme {
  --color-cold-purple: #9d8abf;
  --color-cold-purple-50: #f9f0ff;
  --color-cold-purple-100: #ede2ff;
  --color-cold-purple-200: #dbcdf1;
  --color-cold-purple-300: #bfaeda;
  --color-cold-purple-400: #a694c7;
  --color-cold-purple-500: #8f7ab3;
  --color-cold-purple-600: #796797;
  --color-cold-purple-700: #615279;
  --color-cold-purple-800: #463c5a;
  --color-cold-purple-900: #30293f;
  --color-cold-purple-950: #1d1728;
}

SCSS

$cold-purple: #9d8abf;
$cold-purple-rgb: 157, 138, 191;
$cold-purple-light: mix(#fff, $cold-purple, 20%);
$cold-purple-dark: mix(#000, $cold-purple, 20%);

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