Purple Blue

CSS

:root {
  --purple-blue: #661aee;
  --purple-blue-rgb: 102 26 238;
  --purple-blue-oklch: oklch(0.495 0.27 287.3);
}

.element {
  color: var(--purple-blue);
  background-color: hsl(262 86% 52%);
  border-color: oklch(0.495 0.27 287.3);
}

Tailwind CSS v4

@theme {
  --color-purple-blue: #661aee;
  --color-purple-blue-50: #f2e9ff;
  --color-purple-blue-100: #e5d9ff;
  --color-purple-blue-200: #d2beff;
  --color-purple-blue-300: #b799ff;
  --color-purple-blue-400: #9c75ff;
  --color-purple-blue-500: #8847ff;
  --color-purple-blue-600: #733ffb;
  --color-purple-blue-700: #5c33ca;
  --color-purple-blue-800: #402599;
  --color-purple-blue-900: #2c196d;
  --color-purple-blue-950: #1a064c;
}

SCSS

$purple-blue: #661aee;
$purple-blue-rgb: 102, 26, 238;
$purple-blue-light: mix(#fff, $purple-blue, 20%);
$purple-blue-dark: mix(#000, $purple-blue, 20%);

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