Crystal Glass

CSS

:root {
  --crystal-glass: #ddffee;
  --crystal-glass-rgb: 221 255 238;
  --crystal-glass-oklch: oklch(0.971 0.042 164);
}

.element {
  color: var(--crystal-glass);
  background-color: hsl(150 100% 93%);
  border-color: oklch(0.971 0.042 164);
}

Tailwind CSS v4

@theme {
  --color-crystal-glass: #ddffee;
  --color-crystal-glass-50: #ebf9f2;
  --color-crystal-glass-100: #dcede5;
  --color-crystal-glass-200: #c4dad0;
  --color-crystal-glass-300: #a4bfb2;
  --color-crystal-glass-400: #89a798;
  --color-crystal-glass-500: #6d8f7f;
  --color-crystal-glass-600: #5c796b;
  --color-crystal-glass-700: #4a6156;
  --color-crystal-glass-800: #36473e;
  --color-crystal-glass-900: #25312b;
  --color-crystal-glass-950: #131d18;
}

SCSS

$crystal-glass: #ddffee;
$crystal-glass-rgb: 221, 255, 238;
$crystal-glass-light: mix(#fff, $crystal-glass, 20%);
$crystal-glass-dark: mix(#000, $crystal-glass, 20%);

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