Aqua Glass

CSS

:root {
  --aqua-glass: #d2e8e0;
  --aqua-glass-rgb: 210 232 224;
  --aqua-glass-oklch: oklch(0.912 0.026 171.9);
}

.element {
  color: var(--aqua-glass);
  background-color: hsl(158 32% 87%);
  border-color: oklch(0.912 0.026 171.9);
}

Tailwind CSS v4

@theme {
  --color-aqua-glass: #d2e8e0;
  --color-aqua-glass-50: #eef8f4;
  --color-aqua-glass-100: #e0ebe7;
  --color-aqua-glass-200: #cad8d3;
  --color-aqua-glass-300: #abbcb6;
  --color-aqua-glass-400: #90a49d;
  --color-aqua-glass-500: #768c84;
  --color-aqua-glass-600: #647670;
  --color-aqua-glass-700: #505f59;
  --color-aqua-glass-800: #3a4541;
  --color-aqua-glass-900: #28302d;
  --color-aqua-glass-950: #161c1a;
}

SCSS

$aqua-glass: #d2e8e0;
$aqua-glass-rgb: 210, 232, 224;
$aqua-glass-light: mix(#fff, $aqua-glass, 20%);
$aqua-glass-dark: mix(#000, $aqua-glass, 20%);

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