Wet Asphalt

CSS

:root {
  --wet-asphalt: #989cab;
  --wet-asphalt-rgb: 152 156 171;
  --wet-asphalt-oklch: oklch(0.694 0.022 273.9);
}

.element {
  color: var(--wet-asphalt);
  background-color: hsl(227 10% 63%);
  border-color: oklch(0.694 0.022 273.9);
}

Tailwind CSS v4

@theme {
  --color-wet-asphalt: #989cab;
  --color-wet-asphalt-50: #f3f5fc;
  --color-wet-asphalt-100: #e6e7f0;
  --color-wet-asphalt-200: #d1d4de;
  --color-wet-asphalt-300: #b4b7c3;
  --color-wet-asphalt-400: #9a9eac;
  --color-wet-asphalt-500: #818595;
  --color-wet-asphalt-600: #6d717e;
  --color-wet-asphalt-700: #575a65;
  --color-wet-asphalt-800: #3f424a;
  --color-wet-asphalt-900: #2c2e34;
  --color-wet-asphalt-950: #191a1f;
}

SCSS

$wet-asphalt: #989cab;
$wet-asphalt-rgb: 152, 156, 171;
$wet-asphalt-light: mix(#fff, $wet-asphalt, 20%);
$wet-asphalt-dark: mix(#000, $wet-asphalt, 20%);

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