Xenon Blue

CSS

:root {
  --xenon-blue: #b7c0d7;
  --xenon-blue-rgb: 183 192 215;
  --xenon-blue-oklch: oklch(0.808 0.034 268.6);
}

.element {
  color: var(--xenon-blue);
  background-color: hsl(223 29% 78%);
  border-color: oklch(0.808 0.034 268.6);
}

Tailwind CSS v4

@theme {
  --color-xenon-blue: #b7c0d7;
  --color-xenon-blue-50: #f1f5ff;
  --color-xenon-blue-100: #e3e8f4;
  --color-xenon-blue-200: #ced4e3;
  --color-xenon-blue-300: #b1b7c9;
  --color-xenon-blue-400: #969eb3;
  --color-xenon-blue-500: #7d869d;
  --color-xenon-blue-600: #6a7185;
  --color-xenon-blue-700: #545b6b;
  --color-xenon-blue-800: #3d424e;
  --color-xenon-blue-900: #2a2e37;
  --color-xenon-blue-950: #171b21;
}

SCSS

$xenon-blue: #b7c0d7;
$xenon-blue-rgb: 183, 192, 215;
$xenon-blue-light: mix(#fff, $xenon-blue, 20%);
$xenon-blue-dark: mix(#000, $xenon-blue, 20%);

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