Blue Glass

CSS

:root {
  --blue-glass: #b8dcdc;
  --blue-glass-rgb: 184 220 220;
  --blue-glass-oklch: oklch(0.869 0.038 196.5);
}

.element {
  color: var(--blue-glass);
  background-color: hsl(180 34% 79%);
  border-color: oklch(0.869 0.038 196.5);
}

Tailwind CSS v4

@theme {
  --color-blue-glass: #b8dcdc;
  --color-blue-glass-50: #e9f9f9;
  --color-blue-glass-100: #daecec;
  --color-blue-glass-200: #c3dada;
  --color-blue-glass-300: #a2bebe;
  --color-blue-glass-400: #85a6a6;
  --color-blue-glass-500: #698e8e;
  --color-blue-glass-600: #597879;
  --color-blue-glass-700: #476060;
  --color-blue-glass-800: #334746;
  --color-blue-glass-900: #233131;
  --color-blue-glass-950: #121d1d;
}

SCSS

$blue-glass: #b8dcdc;
$blue-glass-rgb: 184, 220, 220;
$blue-glass-light: mix(#fff, $blue-glass, 20%);
$blue-glass-dark: mix(#000, $blue-glass, 20%);

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