Blue Fin

CSS

:root {
  --blue-fin: #577fae;
  --blue-fin-rgb: 87 127 174;
  --blue-fin-oklch: oklch(0.587 0.085 253.1);
}

.element {
  color: var(--blue-fin);
  background-color: hsl(212 35% 51%);
  border-color: oklch(0.587 0.085 253.1);
}

Tailwind CSS v4

@theme {
  --color-blue-fin: #577fae;
  --color-blue-fin-50: #e5f7ff;
  --color-blue-fin-100: #d5eaff;
  --color-blue-fin-200: #bcd7f9;
  --color-blue-fin-300: #9abae3;
  --color-blue-fin-400: #7aa2d0;
  --color-blue-fin-500: #5c89be;
  --color-blue-fin-600: #4f74a0;
  --color-blue-fin-700: #3f5d80;
  --color-blue-fin-800: #2b445f;
  --color-blue-fin-900: #1d2f43;
  --color-blue-fin-950: #0d1c2b;
}

SCSS

$blue-fin: #577fae;
$blue-fin-rgb: 87, 127, 174;
$blue-fin-light: mix(#fff, $blue-fin, 20%);
$blue-fin-dark: mix(#000, $blue-fin, 20%);

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