Pale Blue Grey

CSS

:root {
  --pale-blue-grey: #a2adb1;
  --pale-blue-grey-rgb: 162 173 177;
  --pale-blue-grey-oklch: oklch(0.74 0.014 221.5);
}

.element {
  color: var(--pale-blue-grey);
  background-color: hsl(196 9% 66%);
  border-color: oklch(0.74 0.014 221.5);
}

Tailwind CSS v4

@theme {
  --color-pale-blue-grey: #a2adb1;
  --color-pale-blue-grey-50: #f1f6f8;
  --color-pale-blue-grey-100: #e3e9eb;
  --color-pale-blue-grey-200: #ced6d8;
  --color-pale-blue-grey-300: #b0b9bc;
  --color-pale-blue-grey-400: #96a0a4;
  --color-pale-blue-grey-500: #7d888d;
  --color-pale-blue-grey-600: #6a7377;
  --color-pale-blue-grey-700: #545c5f;
  --color-pale-blue-grey-800: #3d4446;
  --color-pale-blue-grey-900: #2a2f30;
  --color-pale-blue-grey-950: #181b1c;
}

SCSS

$pale-blue-grey: #a2adb1;
$pale-blue-grey-rgb: 162, 173, 177;
$pale-blue-grey-light: mix(#fff, $pale-blue-grey, 20%);
$pale-blue-grey-dark: mix(#000, $pale-blue-grey, 20%);

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