Romanic Scene

CSS

:root {
  --romanic-scene: #3b0346;
  --romanic-scene-rgb: 59 3 70;
  --romanic-scene-oklch: oklch(0.259 0.119 320.1);
}

.element {
  color: var(--romanic-scene);
  background-color: hsl(290 92% 14%);
  border-color: oklch(0.259 0.119 320.1);
}

Tailwind CSS v4

@theme {
  --color-romanic-scene: #3b0346;
  --color-romanic-scene-50: #ffebff;
  --color-romanic-scene-100: #fbdbff;
  --color-romanic-scene-200: #edc4f3;
  --color-romanic-scene-300: #d4a3dc;
  --color-romanic-scene-400: #be87ca;
  --color-romanic-scene-500: #a96ab7;
  --color-romanic-scene-600: #8e5a9a;
  --color-romanic-scene-700: #72487c;
  --color-romanic-scene-800: #53345d;
  --color-romanic-scene-900: #3a2441;
  --color-romanic-scene-950: #24122a;
}

SCSS

$romanic-scene: #3b0346;
$romanic-scene-rgb: 59, 3, 70;
$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);
}