Limo-Scene

CSS

:root {
  --limo-scene: #4b4950;
  --limo-scene-rgb: 75 73 80;
  --limo-scene-oklch: oklch(0.41 0.012 298.9);
}

.element {
  color: var(--limo-scene);
  background-color: hsl(257 5% 30%);
  border-color: oklch(0.41 0.012 298.9);
}

Tailwind CSS v4

@theme {
  --color-limo-scene: #4b4950;
  --color-limo-scene-50: #f5f4f8;
  --color-limo-scene-100: #e8e7eb;
  --color-limo-scene-200: #d5d3d9;
  --color-limo-scene-300: #b8b6bd;
  --color-limo-scene-400: #9f9da5;
  --color-limo-scene-500: #87858d;
  --color-limo-scene-600: #727077;
  --color-limo-scene-700: #5b5a5f;
  --color-limo-scene-800: #434246;
  --color-limo-scene-900: #2e2d30;
  --color-limo-scene-950: #1b1a1d;
}

SCSS

$limo-scene: #4b4950;
$limo-scene-rgb: 75, 73, 80;
$limo-scene-light: mix(#fff, $limo-scene, 20%);
$limo-scene-dark: mix(#000, $limo-scene, 20%);

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