Valley of Glaciers

CSS

:root {
  --valley-of-glaciers: #2d7e96;
  --valley-of-glaciers-rgb: 45 126 150;
  --valley-of-glaciers-oklch: oklch(0.555 0.085 221.2);
}

.element {
  color: var(--valley-of-glaciers);
  background-color: hsl(194 54% 38%);
  border-color: oklch(0.555 0.085 221.2);
}

Tailwind CSS v4

@theme {
  --color-valley-of-glaciers: #2d7e96;
  --color-valley-of-glaciers-50: #dcfbff;
  --color-valley-of-glaciers-100: #caeffd;
  --color-valley-of-glaciers-200: #adddef;
  --color-valley-of-glaciers-300: #87c2d7;
  --color-valley-of-glaciers-400: #61aac2;
  --color-valley-of-glaciers-500: #3893ae;
  --color-valley-of-glaciers-600: #317c93;
  --color-valley-of-glaciers-700: #276376;
  --color-valley-of-glaciers-800: #1a4956;
  --color-valley-of-glaciers-900: #11333c;
  --color-valley-of-glaciers-950: #031e26;
}

SCSS

$valley-of-glaciers: #2d7e96;
$valley-of-glaciers-rgb: 45, 126, 150;
$valley-of-glaciers-light: mix(#fff, $valley-of-glaciers, 20%);
$valley-of-glaciers-dark: mix(#000, $valley-of-glaciers, 20%);

.element {
  color: $valley-of-glaciers;
  box-shadow: 0 0 0 2px rgba($valley-of-glaciers, 0.35);
}