City Rain

CSS

:root {
  --city-rain: #525c61;
  --city-rain-rgb: 82 92 97;
  --city-rain-oklch: oklch(0.468 0.015 229.2);
}

.element {
  color: var(--city-rain);
  background-color: hsl(200 8% 35%);
  border-color: oklch(0.468 0.015 229.2);
}

Tailwind CSS v4

@theme {
  --color-city-rain: #525c61;
  --color-city-rain-50: #f1f6f9;
  --color-city-rain-100: #e3e9ec;
  --color-city-rain-200: #ced5d9;
  --color-city-rain-300: #b0b9be;
  --color-city-rain-400: #96a0a6;
  --color-city-rain-500: #7d888e;
  --color-city-rain-600: #697378;
  --color-city-rain-700: #545c60;
  --color-city-rain-800: #3d4346;
  --color-city-rain-900: #2a2f31;
  --color-city-rain-950: #181b1d;
}

SCSS

$city-rain: #525c61;
$city-rain-rgb: 82, 92, 97;
$city-rain-light: mix(#fff, $city-rain, 20%);
$city-rain-dark: mix(#000, $city-rain, 20%);

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