Wavy Glass

CSS

:root {
  --wavy-glass: #aea266;
  --wavy-glass-rgb: 174 162 102;
  --wavy-glass-oklch: oklch(0.709 0.081 98.3);
}

.element {
  color: var(--wavy-glass);
  background-color: hsl(50 31% 54%);
  border-color: oklch(0.709 0.081 98.3);
}

Tailwind CSS v4

@theme {
  --color-wavy-glass: #aea266;
  --color-wavy-glass-50: #faf6dc;
  --color-wavy-glass-100: #eee9cb;
  --color-wavy-glass-200: #dcd6ae;
  --color-wavy-glass-300: #c0b989;
  --color-wavy-glass-400: #ab9f67;
  --color-wavy-glass-500: #948744;
  --color-wavy-glass-600: #7d723b;
  --color-wavy-glass-700: #645b2e;
  --color-wavy-glass-800: #4b4220;
  --color-wavy-glass-900: #342e15;
  --color-wavy-glass-950: #1f1a07;
}

SCSS

$wavy-glass: #aea266;
$wavy-glass-rgb: 174, 162, 102;
$wavy-glass-light: mix(#fff, $wavy-glass, 20%);
$wavy-glass-dark: mix(#000, $wavy-glass, 20%);

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