Loch Blue

CSS

:root {
  --loch-blue: #609795;
  --loch-blue-rgb: 96 151 149;
  --loch-blue-oklch: oklch(0.638 0.058 192.9);
}

.element {
  color: var(--loch-blue);
  background-color: hsl(178 22% 48%);
  border-color: oklch(0.638 0.058 192.9);
}

Tailwind CSS v4

@theme {
  --color-loch-blue: #609795;
  --color-loch-blue-50: #e3fbfa;
  --color-loch-blue-100: #d3eeee;
  --color-loch-blue-200: #b9dddc;
  --color-loch-blue-300: #95c1c0;
  --color-loch-blue-400: #75aaa8;
  --color-loch-blue-500: #559391;
  --color-loch-blue-600: #497c7a;
  --color-loch-blue-700: #3a6362;
  --color-loch-blue-800: #294947;
  --color-loch-blue-900: #1c3331;
  --color-loch-blue-950: #0c1e1d;
}

SCSS

$loch-blue: #609795;
$loch-blue-rgb: 96, 151, 149;
$loch-blue-light: mix(#fff, $loch-blue, 20%);
$loch-blue-dark: mix(#000, $loch-blue, 20%);

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