Lilac Intuition

CSS

:root {
  --lilac-intuition: #9a7ea7;
  --lilac-intuition-rgb: 154 126 167;
  --lilac-intuition-oklch: oklch(0.634 0.068 315);
}

.element {
  color: var(--lilac-intuition);
  background-color: hsl(281 19% 57%);
  border-color: oklch(0.634 0.068 315);
}

Tailwind CSS v4

@theme {
  --color-lilac-intuition: #9a7ea7;
  --color-lilac-intuition-50: #fdf0ff;
  --color-lilac-intuition-100: #f1e1f7;
  --color-lilac-intuition-200: #e0cce8;
  --color-lilac-intuition-300: #c6adcf;
  --color-lilac-intuition-400: #ae93bb;
  --color-lilac-intuition-500: #9779a6;
  --color-lilac-intuition-600: #80668c;
  --color-lilac-intuition-700: #665270;
  --color-lilac-intuition-800: #4b3b53;
  --color-lilac-intuition-900: #34293a;
  --color-lilac-intuition-950: #1f1724;
}

SCSS

$lilac-intuition: #9a7ea7;
$lilac-intuition-rgb: 154, 126, 167;
$lilac-intuition-light: mix(#fff, $lilac-intuition, 20%);
$lilac-intuition-dark: mix(#000, $lilac-intuition, 20%);

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