City Street

CSS

:root {
  --city-street: #bab2ab;
  --city-street-rgb: 186 178 171;
  --city-street-oklch: oklch(0.768 0.013 63.9);
}

.element {
  color: var(--city-street);
  background-color: hsl(28 10% 70%);
  border-color: oklch(0.768 0.013 63.9);
}

Tailwind CSS v4

@theme {
  --color-city-street: #bab2ab;
  --color-city-street-50: #f8f4f1;
  --color-city-street-100: #ebe7e3;
  --color-city-street-200: #d8d3ce;
  --color-city-street-300: #bcb6b0;
  --color-city-street-400: #a49d96;
  --color-city-street-500: #8d847d;
  --color-city-street-600: #77706a;
  --color-city-street-700: #5f5a55;
  --color-city-street-800: #46413e;
  --color-city-street-900: #302d2a;
  --color-city-street-950: #1d1a18;
}

SCSS

$city-street: #bab2ab;
$city-street-rgb: 186, 178, 171;
$city-street-light: mix(#fff, $city-street, 20%);
$city-street-dark: mix(#000, $city-street, 20%);

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