Exotic Evening

CSS

:root {
  --exotic-evening: #58516e;
  --exotic-evening-rgb: 88 81 110;
  --exotic-evening-oklch: oklch(0.453 0.047 295.5);
}

.element {
  color: var(--exotic-evening);
  background-color: hsl(254 15% 37%);
  border-color: oklch(0.453 0.047 295.5);
}

Tailwind CSS v4

@theme {
  --color-exotic-evening: #58516e;
  --color-exotic-evening-50: #f6f3ff;
  --color-exotic-evening-100: #e9e5f6;
  --color-exotic-evening-200: #d6d0e7;
  --color-exotic-evening-300: #bab3cd;
  --color-exotic-evening-400: #a099b8;
  --color-exotic-evening-500: #8880a3;
  --color-exotic-evening-600: #736d8a;
  --color-exotic-evening-700: #5c576e;
  --color-exotic-evening-800: #433f52;
  --color-exotic-evening-900: #2e2c39;
  --color-exotic-evening-950: #1b1923;
}

SCSS

$exotic-evening: #58516e;
$exotic-evening-rgb: 88, 81, 110;
$exotic-evening-light: mix(#fff, $exotic-evening, 20%);
$exotic-evening-dark: mix(#000, $exotic-evening, 20%);

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