Ritual Experience

CSS

:root {
  --ritual-experience: #533844;
  --ritual-experience-rgb: 83 56 68;
  --ritual-experience-oklch: oklch(0.376 0.042 351);
}

.element {
  color: var(--ritual-experience);
  background-color: hsl(333 19% 27%);
  border-color: oklch(0.376 0.042 351);
}

Tailwind CSS v4

@theme {
  --color-ritual-experience: #533844;
  --color-ritual-experience-50: #fff0f6;
  --color-ritual-experience-100: #f4e2e9;
  --color-ritual-experience-200: #e4cdd6;
  --color-ritual-experience-300: #caafb9;
  --color-ritual-experience-400: #b395a1;
  --color-ritual-experience-500: #9d7b8a;
  --color-ritual-experience-600: #856874;
  --color-ritual-experience-700: #6a535d;
  --color-ritual-experience-800: #4e3d45;
  --color-ritual-experience-900: #362a2f;
  --color-ritual-experience-950: #21171c;
}

SCSS

$ritual-experience: #533844;
$ritual-experience-rgb: 83, 56, 68;
$ritual-experience-light: mix(#fff, $ritual-experience, 20%);
$ritual-experience-dark: mix(#000, $ritual-experience, 20%);

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