Bevelled Glass

CSS

:root {
  --bevelled-glass: #7accb8;
  --bevelled-glass-rgb: 122 204 184;
  --bevelled-glass-oklch: oklch(0.787 0.086 176.6);
}

.element {
  color: var(--bevelled-glass);
  background-color: hsl(165 45% 64%);
  border-color: oklch(0.787 0.086 176.6);
}

Tailwind CSS v4

@theme {
  --color-bevelled-glass: #7accb8;
  --color-bevelled-glass-50: #dcfef5;
  --color-bevelled-glass-100: #caf2e8;
  --color-bevelled-glass-200: #ade1d4;
  --color-bevelled-glass-300: #86c6b8;
  --color-bevelled-glass-400: #63af9d;
  --color-bevelled-glass-500: #399985;
  --color-bevelled-glass-600: #328170;
  --color-bevelled-glass-700: #28675a;
  --color-bevelled-glass-800: #1c4c40;
  --color-bevelled-glass-900: #13352c;
  --color-bevelled-glass-950: #042019;
}

SCSS

$bevelled-glass: #7accb8;
$bevelled-glass-rgb: 122, 204, 184;
$bevelled-glass-light: mix(#fff, $bevelled-glass, 20%);
$bevelled-glass-dark: mix(#000, $bevelled-glass, 20%);

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