Sky Glass

CSS

:root {
  --sky-glass: #d1dcd8;
  --sky-glass-rgb: 209 220 216;
  --sky-glass-oklch: oklch(0.885 0.013 172.3);
}

.element {
  color: var(--sky-glass);
  background-color: hsl(158 14% 84%);
  border-color: oklch(0.885 0.013 172.3);
}

Tailwind CSS v4

@theme {
  --color-sky-glass: #d1dcd8;
  --color-sky-glass-50: #f1f6f5;
  --color-sky-glass-100: #e4e9e7;
  --color-sky-glass-200: #cfd6d4;
  --color-sky-glass-300: #b1bab7;
  --color-sky-glass-400: #97a19d;
  --color-sky-glass-500: #7e8985;
  --color-sky-glass-600: #6b7471;
  --color-sky-glass-700: #555d5a;
  --color-sky-glass-800: #3e4442;
  --color-sky-glass-900: #2b2f2d;
  --color-sky-glass-950: #181b1a;
}

SCSS

$sky-glass: #d1dcd8;
$sky-glass-rgb: 209, 220, 216;
$sky-glass-light: mix(#fff, $sky-glass, 20%);
$sky-glass-dark: mix(#000, $sky-glass, 20%);

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