Rolling Waves

CSS

:root {
  --rolling-waves: #bfd1c9;
  --rolling-waves-rgb: 191 209 201;
  --rolling-waves-oklch: oklch(0.845 0.022 167.4);
}

.element {
  color: var(--rolling-waves);
  background-color: hsl(153 16% 78%);
  border-color: oklch(0.845 0.022 167.4);
}

Tailwind CSS v4

@theme {
  --color-rolling-waves: #bfd1c9;
  --color-rolling-waves-50: #eff7f4;
  --color-rolling-waves-100: #e1eae6;
  --color-rolling-waves-200: #ccd7d3;
  --color-rolling-waves-300: #adbbb5;
  --color-rolling-waves-400: #93a39c;
  --color-rolling-waves-500: #798b83;
  --color-rolling-waves-600: #66766f;
  --color-rolling-waves-700: #525e59;
  --color-rolling-waves-800: #3b4540;
  --color-rolling-waves-900: #29302c;
  --color-rolling-waves-950: #171c19;
}

SCSS

$rolling-waves: #bfd1c9;
$rolling-waves-rgb: 191, 209, 201;
$rolling-waves-light: mix(#fff, $rolling-waves, 20%);
$rolling-waves-dark: mix(#000, $rolling-waves, 20%);

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