Sylph of Moonlight

CSS

:root {
  --sylph-of-moonlight: #524efb;
  --sylph-of-moonlight-rgb: 82 78 251;
  --sylph-of-moonlight-oklch: oklch(0.544 0.247 275.4);
}

.element {
  color: var(--sylph-of-moonlight);
  background-color: hsl(241 96% 65%);
  border-color: oklch(0.544 0.247 275.4);
}

Tailwind CSS v4

@theme {
  --color-sylph-of-moonlight: #524efb;
  --color-sylph-of-moonlight-50: #e3efff;
  --color-sylph-of-moonlight-100: #d3e0ff;
  --color-sylph-of-moonlight-200: #bbc9ff;
  --color-sylph-of-moonlight-300: #9ba6ff;
  --color-sylph-of-moonlight-400: #7b87ff;
  --color-sylph-of-moonlight-500: #6361ff;
  --color-sylph-of-moonlight-600: #5454f6;
  --color-sylph-of-moonlight-700: #4243c6;
  --color-sylph-of-moonlight-800: #2c3195;
  --color-sylph-of-moonlight-900: #1d226a;
  --color-sylph-of-moonlight-950: #0f0f4a;
}

SCSS

$sylph-of-moonlight: #524efb;
$sylph-of-moonlight-rgb: 82, 78, 251;
$sylph-of-moonlight-light: mix(#fff, $sylph-of-moonlight, 20%);
$sylph-of-moonlight-dark: mix(#000, $sylph-of-moonlight, 20%);

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