Glass Tile

CSS

:root {
  --glass-tile: #cdd0c0;
  --glass-tile-rgb: 205 208 192;
  --glass-tile-oklch: oklch(0.851 0.022 115.5);
}

.element {
  color: var(--glass-tile);
  background-color: hsl(71 15% 78%);
  border-color: oklch(0.851 0.022 115.5);
}

Tailwind CSS v4

@theme {
  --color-glass-tile: #cdd0c0;
  --color-glass-tile-50: #f4f6ef;
  --color-glass-tile-100: #e7e9e1;
  --color-glass-tile-200: #d3d6cb;
  --color-glass-tile-300: #b6b9ad;
  --color-glass-tile-400: #9ea092;
  --color-glass-tile-500: #858878;
  --color-glass-tile-600: #717366;
  --color-glass-tile-700: #5a5c51;
  --color-glass-tile-800: #42433b;
  --color-glass-tile-900: #2e2e28;
  --color-glass-tile-950: #1a1b16;
}

SCSS

$glass-tile: #cdd0c0;
$glass-tile-rgb: 205, 208, 192;
$glass-tile-light: mix(#fff, $glass-tile, 20%);
$glass-tile-dark: mix(#000, $glass-tile, 20%);

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