Lily of the Nile

CSS

:root {
  --lily-of-the-nile: #9191bb;
  --lily-of-the-nile-rgb: 145 145 187;
  --lily-of-the-nile-oklch: oklch(0.672 0.062 284.6);
}

.element {
  color: var(--lily-of-the-nile);
  background-color: hsl(240 24% 65%);
  border-color: oklch(0.672 0.062 284.6);
}

Tailwind CSS v4

@theme {
  --color-lily-of-the-nile: #9191bb;
  --color-lily-of-the-nile-50: #f3f3ff;
  --color-lily-of-the-nile-100: #e6e5fc;
  --color-lily-of-the-nile-200: #d2d1ee;
  --color-lily-of-the-nile-300: #b4b3d6;
  --color-lily-of-the-nile-400: #9a9ac2;
  --color-lily-of-the-nile-500: #8181ae;
  --color-lily-of-the-nile-600: #6d6d93;
  --color-lily-of-the-nile-700: #575776;
  --color-lily-of-the-nile-800: #3f4057;
  --color-lily-of-the-nile-900: #2b2c3d;
  --color-lily-of-the-nile-950: #191927;
}

SCSS

$lily-of-the-nile: #9191bb;
$lily-of-the-nile-rgb: 145, 145, 187;
$lily-of-the-nile-light: mix(#fff, $lily-of-the-nile, 20%);
$lily-of-the-nile-dark: mix(#000, $lily-of-the-nile, 20%);

.element {
  color: $lily-of-the-nile;
  box-shadow: 0 0 0 2px rgba($lily-of-the-nile, 0.35);
}