Cathedral Glass

CSS

:root {
  --cathedral-glass: #7a999c;
  --cathedral-glass-rgb: 122 153 156;
  --cathedral-glass-oklch: oklch(0.661 0.035 203.6);
}

.element {
  color: var(--cathedral-glass);
  background-color: hsl(185 15% 55%);
  border-color: oklch(0.661 0.035 203.6);
}

Tailwind CSS v4

@theme {
  --color-cathedral-glass: #7a999c;
  --color-cathedral-glass-50: #eaf8fa;
  --color-cathedral-glass-100: #dbebed;
  --color-cathedral-glass-200: #c4d9db;
  --color-cathedral-glass-300: #a4bdc0;
  --color-cathedral-glass-400: #87a5a8;
  --color-cathedral-glass-500: #6b8d91;
  --color-cathedral-glass-600: #5b787a;
  --color-cathedral-glass-700: #496062;
  --color-cathedral-glass-800: #344647;
  --color-cathedral-glass-900: #243131;
  --color-cathedral-glass-950: #121d1d;
}

SCSS

$cathedral-glass: #7a999c;
$cathedral-glass-rgb: 122, 153, 156;
$cathedral-glass-light: mix(#fff, $cathedral-glass, 20%);
$cathedral-glass-dark: mix(#000, $cathedral-glass, 20%);

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