Pale Lavender

CSS

:root {
  --pale-lavender: #dcd0ff;
  --pale-lavender-rgb: 220 208 255;
  --pale-lavender-oklch: oklch(0.882 0.065 296.7);
}

.element {
  color: var(--pale-lavender);
  background-color: hsl(255 100% 91%);
  border-color: oklch(0.882 0.065 296.7);
}

Tailwind CSS v4

@theme {
  --color-pale-lavender: #dcd0ff;
  --color-pale-lavender-50: #f7f1ff;
  --color-pale-lavender-100: #eae4fb;
  --color-pale-lavender-200: #d7cfed;
  --color-pale-lavender-300: #bbb1d5;
  --color-pale-lavender-400: #a297c1;
  --color-pale-lavender-500: #8a7dad;
  --color-pale-lavender-600: #756a92;
  --color-pale-lavender-700: #5e5575;
  --color-pale-lavender-800: #443e57;
  --color-pale-lavender-900: #2f2b3d;
  --color-pale-lavender-950: #1b1826;
}

SCSS

$pale-lavender: #dcd0ff;
$pale-lavender-rgb: 220, 208, 255;
$pale-lavender-light: mix(#fff, $pale-lavender, 20%);
$pale-lavender-dark: mix(#000, $pale-lavender, 20%);

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