Fountain Foam

CSS

:root {
  --fountain-foam: #c6d0c6;
  --fountain-foam-rgb: 198 208 198;
  --fountain-foam-oklch: oklch(0.847 0.017 145.4);
}

.element {
  color: var(--fountain-foam);
  background-color: hsl(120 10% 80%);
  border-color: oklch(0.847 0.017 145.4);
}

Tailwind CSS v4

@theme {
  --color-fountain-foam: #c6d0c6;
  --color-fountain-foam-50: #f2f7f2;
  --color-fountain-foam-100: #e4e9e4;
  --color-fountain-foam-200: #d0d6d0;
  --color-fountain-foam-300: #b2bab2;
  --color-fountain-foam-400: #98a198;
  --color-fountain-foam-500: #7f897f;
  --color-fountain-foam-600: #6c746c;
  --color-fountain-foam-700: #565d56;
  --color-fountain-foam-800: #3f443f;
  --color-fountain-foam-900: #2b2f2b;
  --color-fountain-foam-950: #191c18;
}

SCSS

$fountain-foam: #c6d0c6;
$fountain-foam-rgb: 198, 208, 198;
$fountain-foam-light: mix(#fff, $fountain-foam, 20%);
$fountain-foam-dark: mix(#000, $fountain-foam, 20%);

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