Ocean Froth

CSS

:root {
  --ocean-froth: #c1ccc2;
  --ocean-froth-rgb: 193 204 194;
  --ocean-froth-oklch: oklch(0.834 0.018 148.1);
}

.element {
  color: var(--ocean-froth);
  background-color: hsl(125 10% 78%);
  border-color: oklch(0.834 0.018 148.1);
}

Tailwind CSS v4

@theme {
  --color-ocean-froth: #c1ccc2;
  --color-ocean-froth-50: #f2f7f2;
  --color-ocean-froth-100: #e4eae5;
  --color-ocean-froth-200: #cfd6d0;
  --color-ocean-froth-300: #b1bab2;
  --color-ocean-froth-400: #98a298;
  --color-ocean-froth-500: #7e8a7f;
  --color-ocean-froth-600: #6b746c;
  --color-ocean-froth-700: #565d56;
  --color-ocean-froth-800: #3e443f;
  --color-ocean-froth-900: #2b2f2b;
  --color-ocean-froth-950: #181c18;
}

SCSS

$ocean-froth: #c1ccc2;
$ocean-froth-rgb: 193, 204, 194;
$ocean-froth-light: mix(#fff, $ocean-froth, 20%);
$ocean-froth-dark: mix(#000, $ocean-froth, 20%);

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