Vision

CSS

:root {
  --vision: #d2cce5;
  --vision-rgb: 210 204 229;
  --vision-oklch: oklch(0.858 0.035 296.6);
}

.element {
  color: var(--vision);
  background-color: hsl(254 32% 85%);
  border-color: oklch(0.858 0.035 296.6);
}

Tailwind CSS v4

@theme {
  --color-vision: #d2cce5;
  --color-vision-50: #f6f3fe;
  --color-vision-100: #e9e6f2;
  --color-vision-200: #d6d1e2;
  --color-vision-300: #b9b4c7;
  --color-vision-400: #a09bb1;
  --color-vision-500: #88829b;
  --color-vision-600: #736e83;
  --color-vision-700: #5c5869;
  --color-vision-800: #43404d;
  --color-vision-900: #2e2c36;
  --color-vision-950: #1b1921;
}

SCSS

$vision: #d2cce5;
$vision-rgb: 210, 204, 229;
$vision-light: mix(#fff, $vision, 20%);
$vision-dark: mix(#000, $vision, 20%);

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