Mirage of Violets

CSS

:root {
  --mirage-of-violets: #7b1c6e;
  --mirage-of-violets-rgb: 123 28 110;
  --mirage-of-violets-oklch: oklch(0.416 0.158 334.3);
}

.element {
  color: var(--mirage-of-violets);
  background-color: hsl(308 63% 30%);
  border-color: oklch(0.416 0.158 334.3);
}

Tailwind CSS v4

@theme {
  --color-mirage-of-violets: #7b1c6e;
  --color-mirage-of-violets-50: #ffe5ff;
  --color-mirage-of-violets-100: #ffd4fc;
  --color-mirage-of-violets-200: #ffbbee;
  --color-mirage-of-violets-300: #ea97d6;
  --color-mirage-of-violets-400: #d678c4;
  --color-mirage-of-violets-500: #c256b0;
  --color-mirage-of-violets-600: #a44a95;
  --color-mirage-of-violets-700: #843b77;
  --color-mirage-of-violets-800: #612a5a;
  --color-mirage-of-violets-900: #441c3f;
  --color-mirage-of-violets-950: #2c0c28;
}

SCSS

$mirage-of-violets: #7b1c6e;
$mirage-of-violets-rgb: 123, 28, 110;
$mirage-of-violets-light: mix(#fff, $mirage-of-violets, 20%);
$mirage-of-violets-dark: mix(#000, $mirage-of-violets, 20%);

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