Rare Happening

CSS

:root {
  --rare-happening: #8daca0;
  --rare-happening-rgb: 141 172 160;
  --rare-happening-oklch: oklch(0.718 0.038 169.7);
}

.element {
  color: var(--rare-happening);
  background-color: hsl(157 16% 61%);
  border-color: oklch(0.718 0.038 169.7);
}

Tailwind CSS v4

@theme {
  --color-rare-happening: #8daca0;
  --color-rare-happening-50: #ebf9f4;
  --color-rare-happening-100: #dcece6;
  --color-rare-happening-200: #c5dad2;
  --color-rare-happening-300: #a5beb5;
  --color-rare-happening-400: #89a69b;
  --color-rare-happening-500: #6d8f82;
  --color-rare-happening-600: #5d796e;
  --color-rare-happening-700: #4a6158;
  --color-rare-happening-800: #364740;
  --color-rare-happening-900: #25312c;
  --color-rare-happening-950: #131d19;
}

SCSS

$rare-happening: #8daca0;
$rare-happening-rgb: 141, 172, 160;
$rare-happening-light: mix(#fff, $rare-happening, 20%);
$rare-happening-dark: mix(#000, $rare-happening, 20%);

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