Dancing in the Spring

CSS

:root {
  --dancing-in-the-spring: #7b7289;
  --dancing-in-the-spring-rgb: 123 114 137;
  --dancing-in-the-spring-oklch: oklch(0.568 0.036 303);
}

.element {
  color: var(--dancing-in-the-spring);
  background-color: hsl(263 9% 49%);
  border-color: oklch(0.568 0.036 303);
}

Tailwind CSS v4

@theme {
  --color-dancing-in-the-spring: #7b7289;
  --color-dancing-in-the-spring-50: #f7f3fe;
  --color-dancing-in-the-spring-100: #eae5f2;
  --color-dancing-in-the-spring-200: #d8d1e1;
  --color-dancing-in-the-spring-300: #bcb3c7;
  --color-dancing-in-the-spring-400: #a39ab1;
  --color-dancing-in-the-spring-500: #8b819b;
  --color-dancing-in-the-spring-600: #756d83;
  --color-dancing-in-the-spring-700: #5e5769;
  --color-dancing-in-the-spring-800: #44404d;
  --color-dancing-in-the-spring-900: #2f2c36;
  --color-dancing-in-the-spring-950: #1c1921;
}

SCSS

$dancing-in-the-spring: #7b7289;
$dancing-in-the-spring-rgb: 123, 114, 137;
$dancing-in-the-spring-light: mix(#fff, $dancing-in-the-spring, 20%);
$dancing-in-the-spring-dark: mix(#000, $dancing-in-the-spring, 20%);

.element {
  color: $dancing-in-the-spring;
  box-shadow: 0 0 0 2px rgba($dancing-in-the-spring, 0.35);
}