Maximum Blue Purple

CSS

:root {
  --maximum-blue-purple: #acace6;
  --maximum-blue-purple-rgb: 172 172 230;
  --maximum-blue-purple-oklch: oklch(0.765 0.083 284.3);
}

.element {
  color: var(--maximum-blue-purple);
  background-color: hsl(240 54% 79%);
  border-color: oklch(0.765 0.083 284.3);
}

Tailwind CSS v4

@theme {
  --color-maximum-blue-purple: #acace6;
  --color-maximum-blue-purple-50: #f3f2ff;
  --color-maximum-blue-purple-100: #e5e4ff;
  --color-maximum-blue-purple-200: #d1d0f7;
  --color-maximum-blue-purple-300: #b3b2e0;
  --color-maximum-blue-purple-400: #9898ce;
  --color-maximum-blue-purple-500: #807ebb;
  --color-maximum-blue-purple-600: #6c6b9e;
  --color-maximum-blue-purple-700: #56567f;
  --color-maximum-blue-purple-800: #3e3f5e;
  --color-maximum-blue-purple-900: #2a2b42;
  --color-maximum-blue-purple-950: #18182a;
}

SCSS

$maximum-blue-purple: #acace6;
$maximum-blue-purple-rgb: 172, 172, 230;
$maximum-blue-purple-light: mix(#fff, $maximum-blue-purple, 20%);
$maximum-blue-purple-dark: mix(#000, $maximum-blue-purple, 20%);

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