Circumorbital Ring

CSS

:root {
  --circumorbital-ring: #6258c4;
  --circumorbital-ring-rgb: 98 88 196;
  --circumorbital-ring-oklch: oklch(0.527 0.163 283.5);
}

.element {
  color: var(--circumorbital-ring);
  background-color: hsl(246 48% 56%);
  border-color: oklch(0.527 0.163 283.5);
}

Tailwind CSS v4

@theme {
  --color-circumorbital-ring: #6258c4;
  --color-circumorbital-ring-50: #f0efff;
  --color-circumorbital-ring-100: #e2e1ff;
  --color-circumorbital-ring-200: #cdcbff;
  --color-circumorbital-ring-300: #b0abff;
  --color-circumorbital-ring-400: #938ffa;
  --color-circumorbital-ring-500: #7b72ec;
  --color-circumorbital-ring-600: #6861c7;
  --color-circumorbital-ring-700: #534da0;
  --color-circumorbital-ring-800: #3a3978;
  --color-circumorbital-ring-900: #282755;
  --color-circumorbital-ring-950: #161439;
}

SCSS

$circumorbital-ring: #6258c4;
$circumorbital-ring-rgb: 98, 88, 196;
$circumorbital-ring-light: mix(#fff, $circumorbital-ring, 20%);
$circumorbital-ring-dark: mix(#000, $circumorbital-ring, 20%);

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