Boredom

CSS

:root {
  --boredom: #8c9c9c;
  --boredom-rgb: 140 156 156;
  --boredom-oklch: oklch(0.68 0.018 196.7);
}

.element {
  color: var(--boredom);
  background-color: hsl(180 7% 58%);
  border-color: oklch(0.68 0.018 196.7);
}

Tailwind CSS v4

@theme {
  --color-boredom: #8c9c9c;
  --color-boredom-50: #eff7f7;
  --color-boredom-100: #e1eaea;
  --color-boredom-200: #ccd7d7;
  --color-boredom-300: #adbabb;
  --color-boredom-400: #93a2a2;
  --color-boredom-500: #798a8a;
  --color-boredom-600: #667575;
  --color-boredom-700: #525d5d;
  --color-boredom-800: #3b4444;
  --color-boredom-900: #292f2f;
  --color-boredom-950: #171c1c;
}

SCSS

$boredom: #8c9c9c;
$boredom-rgb: 140, 156, 156;
$boredom-light: mix(#fff, $boredom, 20%);
$boredom-dark: mix(#000, $boredom, 20%);

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