#7D8DA6

CSS

:root {
  --celestial-horizon: #7d8da6;
  --celestial-horizon-rgb: 125 141 166;
  --celestial-horizon-oklch: oklch(0.639 0.042 259.3);
}

.element {
  color: var(--celestial-horizon);
  background-color: hsl(217 19% 57%);
  border-color: oklch(0.639 0.042 259.3);
}

Tailwind CSS v4

@theme {
  --color-celestial-horizon: #7d8da6;
  --color-celestial-horizon-50: #eef6ff;
  --color-celestial-horizon-100: #e0e8f6;
  --color-celestial-horizon-200: #cad5e7;
  --color-celestial-horizon-300: #acb8cd;
  --color-celestial-horizon-400: #909fb8;
  --color-celestial-horizon-500: #7687a2;
  --color-celestial-horizon-600: #647289;
  --color-celestial-horizon-700: #505c6e;
  --color-celestial-horizon-800: #394351;
  --color-celestial-horizon-900: #272e38;
  --color-celestial-horizon-950: #151b23;
}

SCSS

$celestial-horizon: #7d8da6;
$celestial-horizon-rgb: 125, 141, 166;
$celestial-horizon-light: mix(#fff, $celestial-horizon, 20%);
$celestial-horizon-dark: mix(#000, $celestial-horizon, 20%);

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