Salute

CSS

:root {
  --salute: #2f323d;
  --salute-rgb: 47 50 61;
  --salute-oklch: oklch(0.319 0.02 273.2);
}

.element {
  color: var(--salute);
  background-color: hsl(227 13% 21%);
  border-color: oklch(0.319 0.02 273.2);
}

Tailwind CSS v4

@theme {
  --color-salute: #2f323d;
  --color-salute-50: #f3f5fb;
  --color-salute-100: #e6e7ef;
  --color-salute-200: #d1d4dd;
  --color-salute-300: #b4b7c2;
  --color-salute-400: #9a9eab;
  --color-salute-500: #828694;
  --color-salute-600: #6e717d;
  --color-salute-700: #585a64;
  --color-salute-800: #40424a;
  --color-salute-900: #2c2e33;
  --color-salute-950: #191a1f;
}

SCSS

$salute: #2f323d;
$salute-rgb: 47, 50, 61;
$salute-light: mix(#fff, $salute, 20%);
$salute-dark: mix(#000, $salute, 20%);

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