Future Vision

CSS

:root {
  --future-vision: #bcb6bc;
  --future-vision-rgb: 188 182 188;
  --future-vision-oklch: oklch(0.783 0.011 325.7);
}

.element {
  color: var(--future-vision);
  background-color: hsl(300 4% 73%);
  border-color: oklch(0.783 0.011 325.7);
}

Tailwind CSS v4

@theme {
  --color-future-vision: #bcb6bc;
  --color-future-vision-50: #f7f4f7;
  --color-future-vision-100: #eae7ea;
  --color-future-vision-200: #d7d3d6;
  --color-future-vision-300: #bab5ba;
  --color-future-vision-400: #a29ca2;
  --color-future-vision-500: #8a848a;
  --color-future-vision-600: #757075;
  --color-future-vision-700: #5d595d;
  --color-future-vision-800: #444144;
  --color-future-vision-900: #2f2d2f;
  --color-future-vision-950: #1c1a1c;
}

SCSS

$future-vision: #bcb6bc;
$future-vision-rgb: 188, 182, 188;
$future-vision-light: mix(#fff, $future-vision, 20%);
$future-vision-dark: mix(#000, $future-vision, 20%);

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