Intellectual

CSS

:root {
  --intellectual: #3f414c;
  --intellectual-rgb: 63 65 76;
  --intellectual-oklch: oklch(0.378 0.019 277.3);
}

.element {
  color: var(--intellectual);
  background-color: hsl(231 9% 27%);
  border-color: oklch(0.378 0.019 277.3);
}

Tailwind CSS v4

@theme {
  --color-intellectual: #3f414c;
  --color-intellectual-50: #f4f5fb;
  --color-intellectual-100: #e6e7ee;
  --color-intellectual-200: #d2d4dc;
  --color-intellectual-300: #b5b7c1;
  --color-intellectual-400: #9b9eaa;
  --color-intellectual-500: #838593;
  --color-intellectual-600: #6f717c;
  --color-intellectual-700: #585a64;
  --color-intellectual-800: #404249;
  --color-intellectual-900: #2c2d33;
  --color-intellectual-950: #191a1e;
}

SCSS

$intellectual: #3f414c;
$intellectual-rgb: 63, 65, 76;
$intellectual-light: mix(#fff, $intellectual, 20%);
$intellectual-dark: mix(#000, $intellectual, 20%);

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