Bottle Glass

CSS

:root {
  --bottle-glass: #238e50;
  --bottle-glass-rgb: 35 142 80;
  --bottle-glass-oklch: oklch(0.573 0.134 152.8);
}

.element {
  color: var(--bottle-glass);
  background-color: hsl(145 60% 35%);
  border-color: oklch(0.573 0.134 152.8);
}

Tailwind CSS v4

@theme {
  --color-bottle-glass: #238e50;
  --color-bottle-glass-50: #d8ffe5;
  --color-bottle-glass-100: #c5f6d5;
  --color-bottle-glass-200: #a6e6bb;
  --color-bottle-glass-300: #7dcc99;
  --color-bottle-glass-400: #58b578;
  --color-bottle-glass-500: #259f59;
  --color-bottle-glass-600: #23864c;
  --color-bottle-glass-700: #1c6c3c;
  --color-bottle-glass-800: #164f29;
  --color-bottle-glass-900: #0e371b;
  --color-bottle-glass-950: #01220c;
}

SCSS

$bottle-glass: #238e50;
$bottle-glass-rgb: 35, 142, 80;
$bottle-glass-light: mix(#fff, $bottle-glass, 20%);
$bottle-glass-dark: mix(#000, $bottle-glass, 20%);

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