Cut Velvet

CSS

:root {
  --cut-velvet: #b391c8;
  --cut-velvet-rgb: 179 145 200;
  --cut-velvet-oklch: oklch(0.707 0.087 312.2);
}

.element {
  color: var(--cut-velvet);
  background-color: hsl(277 33% 68%);
  border-color: oklch(0.707 0.087 312.2);
}

Tailwind CSS v4

@theme {
  --color-cut-velvet: #b391c8;
  --color-cut-velvet-50: #ffeeff;
  --color-cut-velvet-100: #f3e0fd;
  --color-cut-velvet-200: #e2caef;
  --color-cut-velvet-300: #c8abd7;
  --color-cut-velvet-400: #b090c4;
  --color-cut-velvet-500: #9a75b0;
  --color-cut-velvet-600: #826394;
  --color-cut-velvet-700: #684f77;
  --color-cut-velvet-800: #4c3a59;
  --color-cut-velvet-900: #35283e;
  --color-cut-velvet-950: #201627;
}

SCSS

$cut-velvet: #b391c8;
$cut-velvet-rgb: 179, 145, 200;
$cut-velvet-light: mix(#fff, $cut-velvet, 20%);
$cut-velvet-dark: mix(#000, $cut-velvet, 20%);

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