A-List Blue

CSS

:root {
  --a-list-blue: #a9bfc5;
  --a-list-blue-rgb: 169 191 197;
  --a-list-blue-oklch: oklch(0.79 0.026 216);
}

.element {
  color: var(--a-list-blue);
  background-color: hsl(193 19% 72%);
  border-color: oklch(0.79 0.026 216);
}

Tailwind CSS v4

@theme {
  --color-a-list-blue: #a9bfc5;
  --color-a-list-blue-50: #eef7fa;
  --color-a-list-blue-100: #dfeaee;
  --color-a-list-blue-200: #c9d7db;
  --color-a-list-blue-300: #aabbc0;
  --color-a-list-blue-400: #8ea3a8;
  --color-a-list-blue-500: #748b91;
  --color-a-list-blue-600: #62757b;
  --color-a-list-blue-700: #4e5e62;
  --color-a-list-blue-800: #394548;
  --color-a-list-blue-900: #273032;
  --color-a-list-blue-950: #151c1e;
}

SCSS

$a-list-blue: #a9bfc5;
$a-list-blue-rgb: 169, 191, 197;
$a-list-blue-light: mix(#fff, $a-list-blue, 20%);
$a-list-blue-dark: mix(#000, $a-list-blue, 20%);

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