Blackcurrant Elixir

CSS

:root {
  --blackcurrant-elixir: #5c4f6a;
  --blackcurrant-elixir-rgb: 92 79 106;
  --blackcurrant-elixir-oklch: oklch(0.451 0.046 306.5);
}

.element {
  color: var(--blackcurrant-elixir);
  background-color: hsl(269 15% 36%);
  border-color: oklch(0.451 0.046 306.5);
}

Tailwind CSS v4

@theme {
  --color-blackcurrant-elixir: #5c4f6a;
  --color-blackcurrant-elixir-50: #f9f2ff;
  --color-blackcurrant-elixir-100: #ece4f4;
  --color-blackcurrant-elixir-200: #dacfe4;
  --color-blackcurrant-elixir-300: #beb1ca;
  --color-blackcurrant-elixir-400: #a598b4;
  --color-blackcurrant-elixir-500: #8e7f9f;
  --color-blackcurrant-elixir-600: #786b86;
  --color-blackcurrant-elixir-700: #60566b;
  --color-blackcurrant-elixir-800: #463f50;
  --color-blackcurrant-elixir-900: #302b37;
  --color-blackcurrant-elixir-950: #1d1822;
}

SCSS

$blackcurrant-elixir: #5c4f6a;
$blackcurrant-elixir-rgb: 92, 79, 106;
$blackcurrant-elixir-light: mix(#fff, $blackcurrant-elixir, 20%);
$blackcurrant-elixir-dark: mix(#000, $blackcurrant-elixir, 20%);

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