Pale Violet

CSS

:root {
  --pale-violet: #c6c3d6;
  --pale-violet-rgb: 198 195 214;
  --pale-violet-oklch: oklch(0.825 0.027 293.1);
}

.element {
  color: var(--pale-violet);
  background-color: hsl(249 19% 80%);
  border-color: oklch(0.825 0.027 293.1);
}

Tailwind CSS v4

@theme {
  --color-pale-violet: #c6c3d6;
  --color-pale-violet-50: #f5f4fc;
  --color-pale-violet-100: #e8e6f0;
  --color-pale-violet-200: #d5d2df;
  --color-pale-violet-300: #b8b5c4;
  --color-pale-violet-400: #9f9cad;
  --color-pale-violet-500: #868397;
  --color-pale-violet-600: #726f7f;
  --color-pale-violet-700: #5b5966;
  --color-pale-violet-800: #42414b;
  --color-pale-violet-900: #2e2d34;
  --color-pale-violet-950: #1a1a20;
}

SCSS

$pale-violet: #c6c3d6;
$pale-violet-rgb: 198, 195, 214;
$pale-violet-light: mix(#fff, $pale-violet, 20%);
$pale-violet-dark: mix(#000, $pale-violet, 20%);

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