Light Powdered Granite

CSS

:root {
  --light-powdered-granite: #d1d6eb;
  --light-powdered-granite-rgb: 209 214 235;
  --light-powdered-granite-oklch: oklch(0.879 0.029 275.1);
}

.element {
  color: var(--light-powdered-granite);
  background-color: hsl(228 39% 87%);
  border-color: oklch(0.879 0.029 275.1);
}

Tailwind CSS v4

@theme {
  --color-light-powdered-granite: #d1d6eb;
  --color-light-powdered-granite-50: #f3f5fe;
  --color-light-powdered-granite-100: #e5e7f2;
  --color-light-powdered-granite-200: #d1d3e1;
  --color-light-powdered-granite-300: #b3b6c7;
  --color-light-powdered-granite-400: #999db0;
  --color-light-powdered-granite-500: #80859a;
  --color-light-powdered-granite-600: #6c7182;
  --color-light-powdered-granite-700: #575a68;
  --color-light-powdered-granite-800: #3f424d;
  --color-light-powdered-granite-900: #2b2d35;
  --color-light-powdered-granite-950: #191a21;
}

SCSS

$light-powdered-granite: #d1d6eb;
$light-powdered-granite-rgb: 209, 214, 235;
$light-powdered-granite-light: mix(#fff, $light-powdered-granite, 20%);
$light-powdered-granite-dark: mix(#000, $light-powdered-granite, 20%);

.element {
  color: $light-powdered-granite;
  box-shadow: 0 0 0 2px rgba($light-powdered-granite, 0.35);
}