River Fountain

CSS

:root {
  --river-fountain: #248591;
  --river-fountain-rgb: 36 133 145;
  --river-fountain-oklch: oklch(0.568 0.087 207.3);
}

.element {
  color: var(--river-fountain);
  background-color: hsl(187 60% 35%);
  border-color: oklch(0.568 0.087 207.3);
}

Tailwind CSS v4

@theme {
  --color-river-fountain: #248591;
  --color-river-fountain-50: #dafdff;
  --color-river-fountain-100: #c7f1f8;
  --color-river-fountain-200: #a9dfe9;
  --color-river-fountain-300: #81c4d0;
  --color-river-fountain-400: #59adb9;
  --color-river-fountain-500: #2896a4;
  --color-river-fountain-600: #257f8a;
  --color-river-fountain-700: #1e666f;
  --color-river-fountain-800: #134b51;
  --color-river-fountain-900: #0c3438;
  --color-river-fountain-950: #001f23;
}

SCSS

$river-fountain: #248591;
$river-fountain-rgb: 36, 133, 145;
$river-fountain-light: mix(#fff, $river-fountain, 20%);
$river-fountain-dark: mix(#000, $river-fountain, 20%);

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