Evening Fizz

CSS

:root {
  --evening-fizz: #4d4970;
  --evening-fizz-rgb: 77 73 112;
  --evening-fizz-oklch: oklch(0.426 0.064 288.1);
}

.element {
  color: var(--evening-fizz);
  background-color: hsl(246 21% 36%);
  border-color: oklch(0.426 0.064 288.1);
}

Tailwind CSS v4

@theme {
  --color-evening-fizz: #4d4970;
  --color-evening-fizz-50: #f4f2ff;
  --color-evening-fizz-100: #e7e5fc;
  --color-evening-fizz-200: #d3d0ee;
  --color-evening-fizz-300: #b6b2d7;
  --color-evening-fizz-400: #9c99c3;
  --color-evening-fizz-500: #8480af;
  --color-evening-fizz-600: #6f6c94;
  --color-evening-fizz-700: #595676;
  --color-evening-fizz-800: #403f58;
  --color-evening-fizz-900: #2c2c3d;
  --color-evening-fizz-950: #191927;
}

SCSS

$evening-fizz: #4d4970;
$evening-fizz-rgb: 77, 73, 112;
$evening-fizz-light: mix(#fff, $evening-fizz, 20%);
$evening-fizz-dark: mix(#000, $evening-fizz, 20%);

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