Alaitoc Blue

CSS

:root {
  --alaitoc-blue: #8e8c97;
  --alaitoc-blue-rgb: 142 140 151;
  --alaitoc-blue-oklch: oklch(0.645 0.016 294.3);
}

.element {
  color: var(--alaitoc-blue);
  background-color: hsl(251 5% 57%);
  border-color: oklch(0.645 0.016 294.3);
}

Tailwind CSS v4

@theme {
  --color-alaitoc-blue: #8e8c97;
  --color-alaitoc-blue-50: #f5f4f9;
  --color-alaitoc-blue-100: #e8e7ed;
  --color-alaitoc-blue-200: #d5d3db;
  --color-alaitoc-blue-300: #b8b6bf;
  --color-alaitoc-blue-400: #9f9da7;
  --color-alaitoc-blue-500: #868490;
  --color-alaitoc-blue-600: #72707a;
  --color-alaitoc-blue-700: #5b5962;
  --color-alaitoc-blue-800: #424148;
  --color-alaitoc-blue-900: #2e2d32;
  --color-alaitoc-blue-950: #1b1a1e;
}

SCSS

$alaitoc-blue: #8e8c97;
$alaitoc-blue-rgb: 142, 140, 151;
$alaitoc-blue-light: mix(#fff, $alaitoc-blue, 20%);
$alaitoc-blue-dark: mix(#000, $alaitoc-blue, 20%);

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