Dried Lilac

CSS

:root {
  --dried-lilac: #bbbbff;
  --dried-lilac-rgb: 187 187 255;
  --dried-lilac-oklch: oklch(0.816 0.095 284.1);
}

.element {
  color: var(--dried-lilac);
  background-color: hsl(240 100% 87%);
  border-color: oklch(0.816 0.095 284.1);
}

Tailwind CSS v4

@theme {
  --color-dried-lilac: #bbbbff;
  --color-dried-lilac-50: #f2f2ff;
  --color-dried-lilac-100: #e4e4ff;
  --color-dried-lilac-200: #d0cffc;
  --color-dried-lilac-300: #b3b1e7;
  --color-dried-lilac-400: #9797d5;
  --color-dried-lilac-500: #7f7dc3;
  --color-dried-lilac-600: #6b6aa5;
  --color-dried-lilac-700: #565584;
  --color-dried-lilac-800: #3d3e63;
  --color-dried-lilac-900: #2a2b45;
  --color-dried-lilac-950: #18182d;
}

SCSS

$dried-lilac: #bbbbff;
$dried-lilac-rgb: 187, 187, 255;
$dried-lilac-light: mix(#fff, $dried-lilac, 20%);
$dried-lilac-dark: mix(#000, $dried-lilac, 20%);

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