English River

CSS

:root {
  --english-river: #3c768a;
  --english-river-rgb: 60 118 138;
  --english-river-oklch: oklch(0.535 0.068 222.9);
}

.element {
  color: var(--english-river);
  background-color: hsl(195 39% 39%);
  border-color: oklch(0.535 0.068 222.9);
}

Tailwind CSS v4

@theme {
  --color-english-river: #3c768a;
  --color-english-river-50: #e2faff;
  --color-english-river-100: #d1edf9;
  --color-english-river-200: #b6dbea;
  --color-english-river-300: #92bfd2;
  --color-english-river-400: #71a8bc;
  --color-english-river-500: #4f90a7;
  --color-english-river-600: #447a8d;
  --color-english-river-700: #366271;
  --color-english-river-800: #254853;
  --color-english-river-900: #19323a;
  --color-english-river-950: #091e24;
}

SCSS

$english-river: #3c768a;
$english-river-rgb: 60, 118, 138;
$english-river-light: mix(#fff, $english-river, 20%);
$english-river-dark: mix(#000, $english-river, 20%);

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