Blue Catch

CSS

:root {
  --blue-catch: #41788a;
  --blue-catch-rgb: 65 120 138;
  --blue-catch-oklch: oklch(0.542 0.065 221.4);
}

.element {
  color: var(--blue-catch);
  background-color: hsl(195 36% 40%);
  border-color: oklch(0.542 0.065 221.4);
}

Tailwind CSS v4

@theme {
  --color-blue-catch: #41788a;
  --color-blue-catch-50: #e2faff;
  --color-blue-catch-100: #d2edf8;
  --color-blue-catch-200: #b8dbe9;
  --color-blue-catch-300: #94bfd0;
  --color-blue-catch-400: #73a8ba;
  --color-blue-catch-500: #5290a5;
  --color-blue-catch-600: #467a8b;
  --color-blue-catch-700: #38626f;
  --color-blue-catch-800: #274852;
  --color-blue-catch-900: #1a3239;
  --color-blue-catch-950: #0a1e23;
}

SCSS

$blue-catch: #41788a;
$blue-catch-rgb: 65, 120, 138;
$blue-catch-light: mix(#fff, $blue-catch, 20%);
$blue-catch-dark: mix(#000, $blue-catch, 20%);

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