Country Sky

CSS

:root {
  --country-sky: #49545a;
  --country-sky-rgb: 73 84 90;
  --country-sky-oklch: oklch(0.438 0.017 231.6);
}

.element {
  color: var(--country-sky);
  background-color: hsl(201 10% 32%);
  border-color: oklch(0.438 0.017 231.6);
}

Tailwind CSS v4

@theme {
  --color-country-sky: #49545a;
  --color-country-sky-50: #f1f6f9;
  --color-country-sky-100: #e3e9ed;
  --color-country-sky-200: #cdd6da;
  --color-country-sky-300: #afb9bf;
  --color-country-sky-400: #95a0a7;
  --color-country-sky-500: #7b8890;
  --color-country-sky-600: #68737a;
  --color-country-sky-700: #535c61;
  --color-country-sky-800: #3d4447;
  --color-country-sky-900: #2a2f31;
  --color-country-sky-950: #171b1d;
}

SCSS

$country-sky: #49545a;
$country-sky-rgb: 73, 84, 90;
$country-sky-light: mix(#fff, $country-sky, 20%);
$country-sky-dark: mix(#000, $country-sky, 20%);

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