Overcast Sky

CSS

:root {
  --overcast-sky: #a7b8c4;
  --overcast-sky-rgb: 167 184 196;
  --overcast-sky-oklch: oklch(0.773 0.025 238.5);
}

.element {
  color: var(--overcast-sky);
  background-color: hsl(205 20% 71%);
  border-color: oklch(0.773 0.025 238.5);
}

Tailwind CSS v4

@theme {
  --color-overcast-sky: #a7b8c4;
  --color-overcast-sky-50: #eff6fc;
  --color-overcast-sky-100: #e1e9f0;
  --color-overcast-sky-200: #cbd6de;
  --color-overcast-sky-300: #acb9c3;
  --color-overcast-sky-400: #91a1ac;
  --color-overcast-sky-500: #778995;
  --color-overcast-sky-600: #65747e;
  --color-overcast-sky-700: #515d65;
  --color-overcast-sky-800: #3a444a;
  --color-overcast-sky-900: #282f33;
  --color-overcast-sky-950: #161b1f;
}

SCSS

$overcast-sky: #a7b8c4;
$overcast-sky-rgb: 167, 184, 196;
$overcast-sky-light: mix(#fff, $overcast-sky, 20%);
$overcast-sky-dark: mix(#000, $overcast-sky, 20%);

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