Etched Glass

CSS

:root {
  --etched-glass: #dde2e2;
  --etched-glass-rgb: 221 226 226;
  --etched-glass-oklch: oklch(0.909 0.005 197.1);
}

.element {
  color: var(--etched-glass);
  background-color: hsl(180 8% 88%);
  border-color: oklch(0.909 0.005 197.1);
}

Tailwind CSS v4

@theme {
  --color-etched-glass: #dde2e2;
  --color-etched-glass-50: #f3f5f6;
  --color-etched-glass-100: #e6e8e8;
  --color-etched-glass-200: #d2d5d5;
  --color-etched-glass-300: #b4b8b8;
  --color-etched-glass-400: #9b9f9f;
  --color-etched-glass-500: #828787;
  --color-etched-glass-600: #6e7272;
  --color-etched-glass-700: #585c5c;
  --color-etched-glass-800: #404343;
  --color-etched-glass-900: #2c2e2e;
  --color-etched-glass-950: #191b1b;
}

SCSS

$etched-glass: #dde2e2;
$etched-glass-rgb: 221, 226, 226;
$etched-glass-light: mix(#fff, $etched-glass, 20%);
$etched-glass-dark: mix(#000, $etched-glass, 20%);

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