Aubergine Perl

CSS

:root {
  --aubergine-perl: #5500aa;
  --aubergine-perl-rgb: 85 0 170;
  --aubergine-perl-oklch: oklch(0.394 0.216 294.8);
}

.element {
  color: var(--aubergine-perl);
  background-color: hsl(270 100% 33%);
  border-color: oklch(0.394 0.216 294.8);
}

Tailwind CSS v4

@theme {
  --color-aubergine-perl: #5500aa;
  --color-aubergine-perl-50: #fbe9ff;
  --color-aubergine-perl-100: #efd9ff;
  --color-aubergine-perl-200: #dec0ff;
  --color-aubergine-perl-300: #c49dff;
  --color-aubergine-perl-400: #aa7dff;
  --color-aubergine-perl-500: #9559ff;
  --color-aubergine-perl-600: #7e4cda;
  --color-aubergine-perl-700: #653daf;
  --color-aubergine-perl-800: #482c85;
  --color-aubergine-perl-900: #321e5e;
  --color-aubergine-perl-950: #1e0c40;
}

SCSS

$aubergine-perl: #5500aa;
$aubergine-perl-rgb: 85, 0, 170;
$aubergine-perl-light: mix(#fff, $aubergine-perl, 20%);
$aubergine-perl-dark: mix(#000, $aubergine-perl, 20%);

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