#3A1050

CSS

:root {
  --romanic-scene: #3a1050;
  --romanic-scene-rgb: 58 16 80;
  --romanic-scene-oklch: oklch(0.279 0.113 311.1);
}

.element {
  color: var(--romanic-scene);
  background-color: hsl(279 67% 19%);
  border-color: oklch(0.279 0.113 311.1);
}

Tailwind CSS v4

@theme {
  --color-romanic-scene: #3a1050;
  --color-romanic-scene-50: #ffecff;
  --color-romanic-scene-100: #f5deff;
  --color-romanic-scene-200: #e5c7f7;
  --color-romanic-scene-300: #cca7e1;
  --color-romanic-scene-400: #b48bd0;
  --color-romanic-scene-500: #9e6fbd;
  --color-romanic-scene-600: #865e9f;
  --color-romanic-scene-700: #6b4b80;
  --color-romanic-scene-800: #4e3760;
  --color-romanic-scene-900: #362543;
  --color-romanic-scene-950: #21142b;
}

SCSS

$romanic-scene: #3a1050;
$romanic-scene-rgb: 58, 16, 80;
$romanic-scene-light: mix(#fff, $romanic-scene, 20%);
$romanic-scene-dark: mix(#000, $romanic-scene, 20%);

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