Uniform

CSS

:root {
  --uniform: #a7b7ca;
  --uniform-rgb: 167 183 202;
  --uniform-oklch: oklch(0.773 0.032 252.7);
}

.element {
  color: var(--uniform);
  background-color: hsl(213 25% 72%);
  border-color: oklch(0.773 0.032 252.7);
}

Tailwind CSS v4

@theme {
  --color-uniform: #a7b7ca;
  --color-uniform-50: #eff6ff;
  --color-uniform-100: #e1e9f3;
  --color-uniform-200: #cbd5e2;
  --color-uniform-300: #acb9c8;
  --color-uniform-400: #91a0b2;
  --color-uniform-500: #77889c;
  --color-uniform-600: #657384;
  --color-uniform-700: #515c69;
  --color-uniform-800: #3a434d;
  --color-uniform-900: #282f36;
  --color-uniform-950: #161b21;
}

SCSS

$uniform: #a7b7ca;
$uniform-rgb: 167, 183, 202;
$uniform-light: mix(#fff, $uniform, 20%);
$uniform-dark: mix(#000, $uniform, 20%);

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