Misty Violet

CSS

:root {
  --misty-violet: #dbd7e4;
  --misty-violet-rgb: 219 215 228;
  --misty-violet-oklch: oklch(0.886 0.018 300);
}

.element {
  color: var(--misty-violet);
  background-color: hsl(258 19% 87%);
  border-color: oklch(0.886 0.018 300);
}

Tailwind CSS v4

@theme {
  --color-misty-violet: #dbd7e4;
  --color-misty-violet-50: #f6f4fa;
  --color-misty-violet-100: #e9e6ed;
  --color-misty-violet-200: #d5d2db;
  --color-misty-violet-300: #b9b5bf;
  --color-misty-violet-400: #a09ca8;
  --color-misty-violet-500: #888491;
  --color-misty-violet-600: #736f7a;
  --color-misty-violet-700: #5c5962;
  --color-misty-violet-800: #434148;
  --color-misty-violet-900: #2e2d32;
  --color-misty-violet-950: #1b1a1e;
}

SCSS

$misty-violet: #dbd7e4;
$misty-violet-rgb: 219, 215, 228;
$misty-violet-light: mix(#fff, $misty-violet, 20%);
$misty-violet-dark: mix(#000, $misty-violet, 20%);

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