Misty Lavender

CSS

:root {
  --misty-lavender: #dbd9e1;
  --misty-lavender-rgb: 219 217 225;
  --misty-lavender-oklch: oklch(0.889 0.011 297.6);
}

.element {
  color: var(--misty-lavender);
  background-color: hsl(255 12% 87%);
  border-color: oklch(0.889 0.011 297.6);
}

Tailwind CSS v4

@theme {
  --color-misty-lavender: #dbd9e1;
  --color-misty-lavender-50: #f5f4f8;
  --color-misty-lavender-100: #e8e7eb;
  --color-misty-lavender-200: #d5d3d8;
  --color-misty-lavender-300: #b8b6bc;
  --color-misty-lavender-400: #9f9da4;
  --color-misty-lavender-500: #87858d;
  --color-misty-lavender-600: #727077;
  --color-misty-lavender-700: #5b5a5f;
  --color-misty-lavender-800: #424246;
  --color-misty-lavender-900: #2e2d30;
  --color-misty-lavender-950: #1b1a1d;
}

SCSS

$misty-lavender: #dbd9e1;
$misty-lavender-rgb: 219, 217, 225;
$misty-lavender-light: mix(#fff, $misty-lavender, 20%);
$misty-lavender-dark: mix(#000, $misty-lavender, 20%);

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